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实现三层遍历删除功能代码
Apr 23 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
vue构建单页面应用实战
Apr 10 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
总结一些js自定义的函数
2006/08/05 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
js解决movebox移动问题
2016/03/29 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python GUI计算器的实现
2020/10/09 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
三问三解心得体会
2014/09/05 职场文书
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript