<!DOCTYPE html> <html ng-app="wsscat"> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/angular.js"></script> <body> <article ng-controller="indexCtrl"> <p>父作用域：</p> <input ng-model="name" /> <section> <p>组件作用域：</p> <wsscat></wsscat> <wsscat1></wsscat1> <wsscat2></wsscat2> </section> </article> </body> <script> var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.name = 'wsscat'; }) app.directive('wsscat', function() { return { restrict: "EAMC", template: "<p>双向数据绑定<br /><input ng-model='name' /></p>", scope: false } }) app.directive('wsscat1', function() { return { restrict: "EAMC", template: "<p>父影响子，子不能影响父<br /><input ng-model='name' /></p>", scope: true } }) app.directive('wsscat2', function() { return { restrict: "EAMC", template: "<p>互不影响<br /><input ng-model='name' /></p>", scope: {} } }) </script> <style> article{ border: 1px solid #009689; } section{ border: 1px solid #22FFFF; } </style> </html>
