本文实例讲述了 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 相关内容感兴趣的读者可查看本站专题:《AngularJS 指令操作技巧总结》、《AngularJS 入门与进阶教程》及《AngularJS MVC 架构总结》
希望本文所述对大家 AngularJS 程序设计有所帮助。
来源: http://www.jb51.net/article/116558.htm