AngularJS实现自定义指令与控制器数据交互的方法示例


Posted in Javascript onJune 19, 2017

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AngularJS自定义指令与控制器数据交互</title>
<!--    <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>-->
    <script src="../../lib/angular/angular.js"></script>
    <script>
    angular.module('yyApp', [])
    .controller('yyHelloController', function($scope){
      $scope.data = {
        name: '张三'
      }
    })
    .controller('yyHelloController2', function($scope){
      $scope.data = {
        name: '李四'
      }
    })
    .directive('yyHello', function(){
      return{
        restrict: 'AE',
        replace: true,
        template: '<div name="{{data.name}}">你好,{{data.name}}</div>'
      };
    });
    </script>
  </head>
  <body ng-app='yyApp'>
    <yy-hello ng-controller='yyHelloController'></yy-hello>
    <div ng-controller='yyHelloController2'>
      <input type="text" ng-model='data.name'>
      <yy-hello></yy-hello>
    </div>
  </body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Js nodeType 属性全面解析
Nov 14 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
js格式化时间小结
Nov 03 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于Bootstrap表单验证功能
Nov 17 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 #Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
You might like
php class类的用法详细总结
2013/10/17 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
Stop SQL Server
2007/06/21 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
JS实现瀑布流布局
2017/10/21 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue观察模式浅析
2018/09/25 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
毕业生求职的求职信
2013/12/05 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技