AngularJs自定義指令詳解（6） - controller、require

時間 2019-11-10

標籤 angularjs 自定義指令詳解 controller require 欄目 AngularJS 简体版

原文原文鏈接

在前面文章中提到一旦聲明瞭require，則連接函數具備第四個參數：controller。html

可見require和controller是配合使用的。angularjs

在自定義指令中使用controller，目的每每是要封裝一些行爲，給其餘指令使用。下面是一個簡單的例子：瀏覽器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <title></title>
    <script language="JavaScript">
        var app = angular.module('myapp',[]);

        app.directive('d1',function() {
            return {
                controller: function ($scope) {
                    this.method1 = function () {
                        return 'World';
                    };
                }
            }
        });

        app.directive('d2',function() {
            return {
                require: 'd1',
                link: function (scope, elem, attrs, d1) {
                    scope.greeting = d1.method1();
                }
            }
        });
    </script>
</head>
<body ng-app="myapp">
<div d1 d2>Hello {{greeting}}!</div>
</body>
</html>

輸出：app

Hello World!函數

從這個例子能夠看到，在DOM中須要聲明d一、d2，若是不聲明d1，那麼d2在檢查require裏的'd1'時，就會拋出異常。ui

AngularJs爲咱們提供了一些標記，使用它們能夠告訴AngularJs怎麼查找所require的控制器：this

1，沒標記。在當前元素中查找，若是找不到就拋出錯誤。spa

2，?標記。在當前元素中查找，若是查找不到，不拋出錯誤，連接函數的第四個參數爲null（如上面代碼link: function (scope, elem, attrs, d1)中的d1）code

3，^標記。不只在當前元素中查找，還查找其全部父級。若是找不到就拋出錯誤。orm

4，^^標記。只在當前元素的父級中查找。若是找不到就拋出錯誤。

5，?^標記。不只在當前元素中查找，還查找其全部父級。若是查找不到，不拋出錯誤，連接函數的第四個參數爲null

6，?^^標記。只在當前元素的父級中查找。若是查找不到，不拋出錯誤，連接函數的第四個參數爲null

咱們修改一下上面例子的代碼，試驗一下第4條：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <title></title>
    <script language="JavaScript">
        var app = angular.module('myapp',[]);

        app.directive('d1',function() {
            return {
                controller: function ($scope) {
                    this.method1 = function () {
                        return 'World';
                    };
                }
            }
        });

        app.directive('d2',function() {
            return {
                require: '^^d1',
                link: function (scope, elem, attrs, d1) {
                    scope.greeting = d1.method1();
                }
            }
        });
    </script>
</head>
<body ng-app="myapp">
<div d1 d2>Hello {{greeting}}!</div>
</body>
</html>

在Chrome瀏覽器的控制檯能夠看到錯誤提示：

Error: [$compile:ctreq] http://errors.angularjs.org/1.3.16/$compile/ctreq?p0=d1&p1=d2

點擊連接去看看（須要FQ）：

Error: $compile:ctreq

Missing Required Controller

Controller 'd1', required by directive 'd2', can't be found!

果真找不到！由於d1放在d2所在的div中（當前元素），^^標記要求去父級找，固然沒有了。

在實際應用時，咱們每每會require 'ngModel'，也就是但願利用AngularJs內置指令ngModel裏的方法，而不是本身從新寫：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <title></title>
    <script language="JavaScript">
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function() {
            return {
                require: 'ngModel',
                link: function (scope, elem, attrs, model) {
                    model.$parsers.unshift(function(value) {
                        if (parseFloat(value)<1) {
                            model.$setValidity('test', true);
                            return parseFloat(value).toFixed(2);
                        } else {
                            model.$setValidity('test', false);
                            return undefined;
                        }
                    });
                }
            }
        });

    </script>
</head>
<body ng-app="myApp">
<form name="form1">
     <div> 請輸入小於1的一個小數：<input name="input1" type="number" ng-model="aNumber" my-directive />
            保留小數點後2位：{{aNumber}}
     </div>
    <span ng-show="form1.input1.$error.test">這個數並不小於1！</span>
</form>
</body>
</html>

上面例子就是利用了ngModel裏已有的$parser屬性和$setValidity方法。

$parsers裏保存了一組function，每當DOM裏數據變化的時候，這組function會被調用。