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 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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中的cookie
2006/11/26 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php实现socket推送技术的示例
2017/12/20 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
任意存:BOXFUL
2018/05/21 全球购物
《小动物过冬》教学反思
2014/04/17 职场文书
出国留学计划书
2014/04/27 职场文书
八一建军节演讲稿
2014/09/10 职场文书
车间质检员岗位职责
2015/04/08 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python的property属性详细讲解
2022/04/11 Python