scope · 前端知識匯總

深入理解自定義指令scope的綁定首先在directive中，使用scope就相當于隔離了作用域，即父controller訪問不到子controller的變量，子controller訪問不到父controller的變量 ~~~ <body ng-app = "myApp"> <div ng-controller="fatherCtrl"> <input type="text" ng-model="bind"> <my-directive ></my-directive> </div> <script> angular.module('myApp',[]) .controller('fatherCtrl',function () { }) .directive('myDirective',function () { return { restrict:'AE', scope:{ }, template:' <div ng-click="click()">shenmegui</div>', link:function (scope) { scope.click=function () { console.log(scope.bind) } } } }) </script> ~~~ #### 如果使用了scope，隔離作用域，那子元素將訪問不到父元素的屬性， #### 要使子元素可以跟父元素的數據進行綁定，可以使用scope里面的三個符號 - @：單向綁定 - =：雙向綁定 - &：用于綁定函數所以要使上面的自作用域可以訪問得到父作用域的元素，可以使用=號的方法，使用注意，我們需要在html的自定義指令中加入一個屬性例如： ~~~ <my-directive son-bind="bind"></my-directive> ~~~ **注：在js文件中的駝峰，在html中都要變為-加上小寫** 然后在directive的js文件中的scope書寫： ~~~ scope:{ sonBind:"=" }, ~~~ 然后我們directive js里的sonBind就相當于父controller里的bind ~~~ .directive('myDirective',function () { return { restrict:'AE', scope:{ sonBind:"=" }, template:' <div ng-click="click()">shenmegui</div>', link:function (scope) { scope.click=function () { console.log(scope.sonBind) } } } }) ~~~ 如果使用的是單向綁定： ~~~ scope:{ sonBind:"@" }, ~~~ 那html里的bind要改為表達式的形式： ~~~ <my-directive son-bind="{{bind}}"></my-directive> ~~~ 然后這個&使用來綁定函數的，如： ~~~ <input type="text" ng-model="bind" ng-blur="Dosome()"> <my-directive son-bind="Dosome()"></my-directive> ~~~ js： ~~~ restrict:'AE', scope:{ sonBind:"&" }, template:' <div ng-click="sonBind()">shenmegui</div>' + ' <button ng-click="sonBind()">按鈕</button>', ~~~ 這樣，點擊自定義指令的東西，就會跟父級controller觸發一樣的函數 * * * * * ### 使用了自定義指令，當父控制器作用域綁定了vm，如何獲取父作用域的數據， - 當父作用域綁定了vm，而自定義指令沒有隔離作用域時，可以在自定義指令的link，或controller里，寫 scop.vm.xx獲取父控制器的數據，注意不能寫vm.xx獲取scope.xx例如： ~~~ angular.module('myApp',[]) .controller('fatherCtrl',function ($scope) { var vm=this vm.name={ date:1, age:20 } }） .directive('myDirective',function () { return { restrict:'AE', template:' <div ng-repeat="x in sonBind">shenmegui</div>' + ' <button>按鈕</button>', link:function (scope) { console.log(scope.vm.name) } } }) ~~~ 這樣就能獲取父控制器的數據 * * * * * 使用ng-transclued的時候，自定義指令的transUrl里面的html最外層必須有一個標簽把他包起來，否則，這個自定義指令不生效，如： ~~~ <div class="checkIn-header clearfix"> <p class="pull-right">累計簽到天數<span class="week">{{data.maxSignNum}}</span>天</p> </div> <div id="checkIn-datepicker"> </div> <div class="checkIn-footer"> <button class="btn btn-checkIn">{{}}</button> <a>簽到規則</a> </div> ~~~ 這樣只是3個同級的div，并且3個同級的div沒有父級，而自定義指令里的link無法操控3個div，所以不生效，所以換成下面這樣： ~~~ <div> <div class="checkIn-header clearfix"> <p class="pull-right">累計簽到天數<span class="week"> {{data.maxSignNum}}</span>天</p> </div> <div id="checkIn-datepicker"> </div> <div class="checkIn-footer"> <button class="btn btn-checkIn">{{}}</button> <a>簽到規則</a> </div> </div> ~~~