JavaScript

超轻量级php框架startmvc

AngularJS实现自定义指令与控制器数据交互的方法示例

更新时间:2020-05-18 11:18:01 作者:startmvc
本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考,

本文实例讲述了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 自定义指令 控制器 数据 交互