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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
this在vue和小程序中的使用详解
Jan 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下常用正则表达式整理
2010/10/26 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Vue列表页渲染优化详解
2017/07/24 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
总经理职责
2013/12/22 职场文书
求职信怎么写
2014/05/23 职场文书
2014年国庆标语
2014/06/30 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2015年手术室工作总结
2015/05/11 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python