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 相关文章推荐
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
详细分析vue响应式原理
Jun 22 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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数组输出html表格的方法
2014/02/24 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
深入浅析python继承问题
2016/05/29 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
如何对python的字典进行排序
2020/06/19 Python
python 如何引入协程和原理分析
2020/11/30 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
关键字final的用法
2013/10/02 面试题
财务总经理岗位职责
2014/02/16 职场文书
集体婚礼策划方案
2014/02/22 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
庆六一宣传标语
2014/10/08 职场文书
高中政治教学反思
2016/02/23 职场文书
Golang二维数组的使用方式
2021/05/28 Golang