有的時候我們需要為非input類型的元素添加ng-model來實現雙向的資料繫結，從而減少冗餘代碼，那麼可以嘗試一下的方式
例如：我頁面中使用了contenteditable這個屬性來實現使用者可直接編譯的div元素
html：
<style> .text{ margin:0 auto; width:100px; height:50px; border:1px solid red; } </style></head><body><div ng-controller="selectController"> <div ng-repeat="pop in citylist"> <div class="text" contenteditable="true" ng-model="pop.pop"></div> </div> <button ng-click="cs()">輸出新資料</button></div></body>
但是直接綁定ng-model是肯定得不到資料的，這時就需要為其增加自訂的屬性，如下所示。
js：
<script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"廣州"}]; $scope.p={}; $scope.cs=function(){ console.log($scope.citylist); } }).directive('contenteditable', function() {//自訂ngModel的屬性可以用在div等其他元素中 return { restrict: 'A', // 作為屬性使用 require: '?ngModel', // 此指令所代替的函數 link: function(scope, element, attrs, ngModel) { if (!ngModel) { return; } // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { element.html(ngModel.$viewValue || ''); }; // Listen for change events to enable binding element.on('blur keyup change', function() { scope.$apply(readViewText); }); // No need to initialize, AngularJS will initialize the text based on ng-model attribute // Write data to the model function readViewText() { var html = element.html(); // When we clear the content editable the browser leaves a <br> behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html === '<br>') { html = ''; } ngModel.$setViewValue(html); } } }; })</script>
其中參數類別如下：
部分參數解釋
restrict：
（字串）選擇性參數，指明指令在DOM裡面以什麼形式被聲明；
取值有：E(元素),A(屬性),C(類),M(注釋)，其中預設值為A；
E(元素)：<directiveName></directiveName>
A(屬性)：<div directiveName='expression'></div>
C(類)： <div class='directiveName'></div>
M(注釋)：<--directive:directiveName expression-->
2.require
字串代表另一個指令的名字，它將會作為link函數的第四個參數
具體用法我們可以舉個例子說明
假設現在我們要編寫兩個指令，兩個指令中的link連結函數中（link函數後面會講）存在有很多重合的方法，
這時候我們就可以將這些重複的方法寫在第三個指令的controller中（上面也講到controller經常用來提供指令間的複用行為）
然後在這兩個指令中，require這個擁有controller欄位的的指令（第三個指令），
最後通過link連結函數的第四個參數就可以引用這些重合的方法了。
<!doctype html><html ng-app="myApp"><head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script></head><body> <outer-directive> <inner-directive></inner-directive> <inner-directive2></inner-directive2> </outer-directive> <script> var app = angular.module('myApp', []); app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope) { this.say = function(someDirective) { console.log('Got:' + someDirective.message); }; } }; }); app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,leifeng"; controllerInstance.say(scope); } }; }); app.directive('innerDirective2', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { scope.message = "Hi,shushu"; controllerInstance.say(scope); } }; }); </script></body></html>
上面例子中的指令innerDirective和指令innerDirective2複用了定義在指令outerDirective的controller中的方法
也進一步說明了，指令中的controller是用來讓不同指令間通訊用的。
另外我們可以在require的參數值加上下面的某個首碼，這會改變尋找控制器的行為：
（1）沒有首碼，指令會在自身提供的控制器中進行尋找，如果找不到任何控制器，則會拋出一個error
（2）？如果在當前的指令沒有找到所需的控制器，則會將null傳給link串連函數的第四個參數
（3）^如果在當前的指令沒有找到所需的控制器，則會尋找父元素的控制器
（4）?^組合
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
