深入理解自定義指令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>
~~~
- 空白目錄
- Javascript
- angularjs
- 自定義指令
- scope
- 自定義指令的封裝
- 自定義指令限制只能輸入數字
- 輪播圖
- 寫angular的順序
- $state
- video
- Es6
- Let
- 箭頭函數
- export
- promise
- 函數
- vue
- vue安裝,以及項目結構
- vue的使用
- easy-vue
- vue起步
- vue基礎
- vue-router
- vue-各文件的依賴關系
- vuex
- vue使用sass語法
- mpvue使用wx.parse
- vue-cli 構建vue項目
- vant的使用
- vue使用插件及常見問題
- 原生Js
- 數組
- ajax
- 執行上下文
- 正則表達式
- jqurey
- jqurey-mobile
- html5
- 工具
- svn使用總結
- webpack
- webpack的構建
- WebStorm
- 切圖相關
- 蘋果手機注意事項
- other
- 前端的價值
- 面試相關
- css
- 小程序如何引用外部字體
- 流的理解
- 替換元素
- content和偽元素
- padding和background 繪制圖形
- css圓角,陰影,漸變
- line-height verticle-align
- 使用background繪制4個直角
- android的字體偏上的問題
- 小程序
- 小程序常見問題
- 小程序常用效果
- mpvue
- nodejs
- 前端工程化學習筆記
- mork.js學習