在運行時覆寫angularjs指令

我想在運行時在我的單頁應用程式中覆寫 angularjs 指令。是否可以？這是我的第一頁js：

appGML.directive('singleSelectKeyUp', function ($resource, $compile, $parse, $timeout, $http, $document,$q) {
return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        singleSelectKeyUp: '='
    },
    link: function (scope, element, attr, ngModel) {
        return scope.$watch(function () {

            return ngModel.$modelValue;
        }, function (name) {
             console.log('first page');
        });
    };
});
appGML.controller("Pay_tra_advertisementController", function ($sce, $compile, $timeout, $scope, $uibModal, $parse, $http, Upload, $mdBottomSheet, $q) {//
});

這是我的第二頁 js：

appGML.directive('singleSelectKeyUp', function ($resource, $compile, $parse, $timeout, $http, $document,$q) {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        return scope.$watch(function () {

            return ngModel.$modelValue;
        }, function (name) {
             console.log('second page');
        });
    };
});
appGML.controller("Pro_tra_boqController", function ($q, $compile, $scope, $http, $parse, $uibModal, Upload, $timeout){//
});

但是在通過ngRoute路由時，我一頁一頁地打開了兩個頁面，兩個指令都在appGML._invokeQueue中，并且只執行了第一個指令。

appGML.config(function ($provide,$routeProvider, $ocLazyLoadProvider, $locationProvider, $controllerProvider, $compileProvider/*, $urlMatcherFactoryProvider, $stateProvider*//*, $urlRouterProvider*/) {
    appGML.controller = $controllerProvider.register;
    appGML.directive = $compileProvider.directive;
    function loadScript(path) {
    var result = $.Deferred(),
        script = document.createElement("script");
    script.async = "async";
    script.type = "text/javascript";
    script.src = path;
    script.onload = script.onreadystatechange = function (_, isAbort) {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            if (isAbort)
                result.reject();
            else
                result.resolve();
        }
    };
    script.onerror = function () { result.reject(); };
    document.querySelector("head").appendChild(script);
    return result.promise();
    }
    function loader(arrayName) {

    return {
        load: function ($q) {
            var deferred = $q.defer(),
                map = arrayName.map(function (name) {
                    return loadScript('/JSController'   name   ".js");
                });
            $provide.decorator('singleSelectKeyUpDirective', ['$delegate', function ($delegate) {
                //$delegate is array of all ng-click directive
                //in this case first one is angular buildin ng-click
                //so we remove it.
                console.log('load:sskuL', $delegate);
                //$delegate.shift();
                return $delegate;
            }]);
            $q.all(map).then(function (r) {
                deferred.resolve();
            });

            return deferred.promise;
        }
    };
}
    $routeProvider.when('/PayModule/Pay_tra_advertisement', {
        templateUrl: '/PayModule/Pay_tra_advertisement',
        controller: 'Pay_tra_advertisementController',
        resolve: loader(['/PayModule/Pay_tra_advertisement'])
    })
        .when('/ProModule/Pro_tra_boq', {
        templateUrl: '/ProModule/Pro_tra_boq',
        controller: 'Pro_tra_boqController',
        resolve: loader(['/ProModule/Pro_tra_boq'])
     })
});

輸出是

first page

禁用第一個指令并用新指令覆寫它是否可行？提前致謝

uj5u.com熱心網友回復：

感謝您為我的問題伙伴花費寶貴的時間。我通過添加嵌套指令克服了這個問題

appGML.config(function ($provide, $routeProvider, $ocLazyLoadProvider, $locationProvider, $controllerProvider, $compileProvider/*, $urlMatcherFactoryProvider, $stateProvider*//*, $urlRouterProvider*/) {
$provide.decorator('$controller', [
    '$delegate',
    function ($delegate) {
        return function (constructor, locals) {
            if (typeof constructor == "string") {
                locals.$scope.controllerName = constructor;
            }

            return $delegate.apply(this, [].slice.call(arguments));
        }
    }]);
//.... other routing codes
});

這是我的嵌套指令

appGML.directive('containerDirective', function ($compile,$location) {
return {
    restrict: 'AE',
    link: function (scope, elem, attrs, ctrl) {
        //if (elem.closest('form').attr('id') == 'Advertisementfrm') {
        //    elem.attr('single-select-key-up-adv', '');
        //}
        //if (elem.closest('form').attr('id') == 'Boqdiv') {
        //    elem.attr('single-select-key-up-boq', '');
        //}
        if (scope.$parent.$parent.$parent.controllerName == 'Pay_tra_advertisementController') {
            elem.attr('single-select-key-up-adv', '');
        }
        if (scope.$parent.$parent.$parent.controllerName == 'Pro_tra_boqController') {
            elem.attr('single-select-key-up-boq', '');
        }
        elem.removeAttr('container-directive');
        $compile(elem)(scope);
    }

}
})

然后我重命名了我的嵌套指令

appGML.directive('singleSelectKeyUpAdv', function ($resource, $compile, $parse, $timeout, $http, $document, $q){
//old code
});

和

appGML.directive('singleSelectKeyUpBoq', function ($resource, $compile, $parse, $timeout, $http, $document) {   
//old code
});

標籤：angularjs angularjs 指令 覆盖 路由

上一篇：帶有按鈕的資料串列應該顯示下面的其余資料

下一篇：將多個資料發送到同一個陣列