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 Array.prototype.slice使用说明
Oct 11 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript之函数直接量(function(){})()
2007/06/29 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python读取xml文件方法解析
2020/08/04 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
法律专业自我鉴定
2013/10/03 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
电台编导求职信
2014/05/06 职场文书
主婚人致辞精选
2015/07/28 职场文书
学习经验交流会总结
2015/11/02 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫