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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
newxtree.js代码
2007/03/13 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
python通过cython加密代码
2020/12/11 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
灵魂歌王观后感
2015/06/17 职场文书
公司人力资源管理制度
2015/08/05 职场文书
思想品德课教学反思
2016/02/24 职场文书