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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 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+ajax 无刷新删除数据
2010/02/20 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Javascript模块模式分析
2008/05/16 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
wxPython之解决闪烁的问题
2018/01/15 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python实现年会抽奖程序
2019/01/22 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
超市国庆节促销方案
2014/02/20 职场文书
经典团队口号
2014/06/06 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
婚宴领导致辞
2015/07/28 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
Golang获取List列表元素的四种方式
2022/04/20 Golang