问题描述
HTML 代码
<p ng-controller='MainController'> control:<input type='text' ng-model='testname' /> directive:<xingoo name='testname'></xingoo></p>
Angular 代码
var myAppModule = angular.module(’myApp’, []);myAppModule.controller(’MainController’, function($scope){ $scope.testname = ’my name is xingoo’;}).directive(’xingoo’, function(){ return{ restrict:’AE’,scope:{ name:’=’},template:’<input type='text' ng-model='name'/>’,replace:true };});
在这两段代码下，control 的输入框被和指令的输入框绑定到了一起，任意改变一边的值都会引起另外一边的改变。我的理解是这样的，不知道对不对，希望大神能不吝赐教：
1.首先在控制器 MainController 中，我们通过 ng-model 将输入框和 MainController 的当前作用域中的一个值 testname 进行了双向绑定；
2.在指令中，我们指定了 scope:{name:’=’}，所以 Angular 会以变量的形式去绑定 name ，而 name 我们传入的值是 testname；
3.所以，在 template:’<input type='text' ng-model='name' />’ 实际上相当于 <input type='text' ng-model='textname'/>；
4.因为指令会创建一个新的子作用域，而这个自作用域可以访问它的父级作用域，也就是控制器 MainController 的 $scope，所以相当于输入框和我们的指令都被双向绑定到了当前作用域的 $scope.testname 上。
问题解答
回答1：说的不错，项目中写组件经常会这样用
