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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
vue时间格式化实例代码
Jun 13 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
JavaScript字符和ASCII实现互相转换
Jun 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中的一个中文字符串截取函数
2007/02/14 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python 编写简单网页服务器的实例
2018/06/01 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
SQL Server面试题
2016/10/17 面试题
不打扫卫生检讨书
2014/02/12 职场文书
根叔历年演讲稿
2014/05/20 职场文书
伦敦奥运会口号
2014/06/13 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
python套接字socket通信
2022/04/01 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers