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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php递归函数怎么用才有效
2018/02/24 PHP
javascript运行机制之this详细介绍
2014/02/07 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
超市5.1促销活动
2014/01/15 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
师德承诺书2015
2015/04/28 职场文书
《植树问题》教学反思
2016/03/03 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript