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 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
php报错502badgateway解决方法
2019/10/11 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python struct模块解析
2014/06/12 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python 音频生成器的实现示例
2019/12/24 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
行政专员工作职责
2013/12/22 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers