angular指令淺談

　　今天在閒暇時間再次對angularjs的指令進行了初探,不探不知道一探嚇一跳啊, 就一個簡單的指令整整難住我了兩個小時,先不說代碼的邏輯是否複雜,就一些內部的一些實現讓我看起來都是頭疼的不行啊,不過最終仍是解決了 下面就來告訴你們angularjs的指令簡單的運行過程,angularjs內置了大量的指令,看似簡單卻又複雜的不行,一旦深究你就會像染上毒癮同樣沒法自拔啊,這也就是一般所說的強迫症,哈哈,下面就給你們附上今天的成功.

　　今天說實在的也沒有寫什麼東西,就是對指令作了初步的學習,首先看html代碼:

<div style="background: yellow">
        <super strength>動感超人----力量</super>
    </div>
    <div style="background: blue">
        <super strength speed>動感超人----力量,速度</super>
    </div>
    <div style="background: red">
        <super strength speed light>動感超人----力量,速度,敏捷</super>
    </div>

　　這些彷佛也沒有什麼  不過對於像我同樣的初學者彷佛會滿臉懵逼,那麼我就稍微給你們解釋下哈, 這裏的super,strength,speed,light都是一些自定義的元素和屬性,也就是對指令作了初始化,而在js代碼中則是對指令作了定義,隨之而來的即是js代碼:

var app = angular.module('derApp', []);
var a;
app.directive('super', function () {
    return {
        scope:{},//這個是獨立做用域,與父做用域毫無關係,scope:true,這種形式的是繼承了父做用域,能夠引用父做用域中的屬性
        restrict: 'AE',//A:表明的是屬性E:表明的是元素,angular推薦使用A和E
        controller:function($scope){//controller 建立一個控制器,他會暴露一些api,利用這個api能夠在多個指令之間進行通訊
            $scope.ary = [];
            this.addStrength = function(){
                $scope.ary.push('strength');
                a=$scope.ary;
            };
            this.addSpeed = function(){
                $scope.ary.push('speed');
                a=$scope.ary;
            };
            this.addLight = function(){
                $scope.ary.push('light');
                a=$scope.ary;
            };
        },
        link:function(scope, element, attrs){//使用編程的方式修改最終成成的dom元素實例,添加事件監聽,並設置數據綁定
            element.bind('mouseenter',function(){
                console.log(scope.ary);
                console.log(a);
            })
        }
    };
})
app.directive('strength', [function () {
    return {
        require:'^super',//require '^super'說明該指令依賴於上面的super指令當其存在時間才能夠正常運行不然會報錯
        restrict: 'AE',
        link: function (scope, element, attrs,superCtrl) {
            superCtrl.addStrength();
        }
    };
}])
app.directive('speed', [function () {
    return {
        require:'^super',
        restrict: 'AE',
        link: function (scope, element, attrs,superCtrl) {
            superCtrl.addSpeed();
        }
    };
}])
app.directive('light', [function () {
    return {
        require:'^super',
        restrict: 'AE',
        link: function (scope, element, attrs,superCtrl) {
            superCtrl.addLight();
        }
    };
}])

　　首先現初始化了模塊,而後定義了super指令,這個指令能夠做爲其餘指令的父指令,從而實現指令的複用,當我寫到這裏時間,遇到了一個困擾我好久的問題,那就是不知道爲何當鼠標moouseenter時間爲何會console出不一樣的值,後來終於明白了,他的意義再於,js中定義了super指令,而html中聲明瞭三個super 也就是意味這有三個super指令,這樣就存在了三個獨立做用域,至於爲何在第二個super上面會console出兩個元素那是由於上面又定義了兩個屬性strength和speed這樣就又執行了這兩個指令,從而往scope.ary中push了兩個元素哈哈,因而乎如今重於解決了,從這個問題看來,總結出一句話,技術達不到,不要瞎胡鬧,仍是要老老實實一步一個腳印的學習,這樣纔會飛的更高,下面放上項目鏈接哈:https://jsfiddle.net/htan72eb/ 注意這個項目要想查看效果必須打開控制檯看輸出 ,好了今天的分享就到這裏,有不懂的地方能夠追問哈