控制器與指令不起作用

我想單擊Bootstrap模塊來完成可滾動內容。它的工作正常。這是繼我的指令代碼：控制器與指令不起作用

'use strict'; 
angular.module('cbookApp') 
     .directive('scrollTo', scrollTo); 

scrollTo.$inject = ['$anchorScroll']; 
function scrollTo($anchorScroll) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.bind('click', function (event) { 
       event.stopPropagation(); 
       var location = attrs.scrollTo; 
       if (scope.vm.isEdit || typeof scope.vm.isEdit =="undefined") { 
        $anchorScroll(location); 
       } else { 
        $anchorScroll(location+'1'); 
       } 
      }); 
     } 
    }; 
}

但唯一的問題是我不知道如何主動類適用於當前的詞綴li。這DEMO方式我發現應用類active當前li並從其他刪除。這是工作沒有Controller as但一旦我添加控制器，因爲它停止工作，並給出一些範圍的錯誤。

var app = angular.module('app', ['directives']); 
app.controller('firstController',[function(){ 
    var vm = this; 
    vm.model = { value: 'dsf'}; 
}]); 
angular.module('directives', []).directive('toggleClass', function() { 
    var directiveDefinitionObject = { 
     restrict: 'A', 
     template: '<span ng-click="localFunction()" ng-class="selected" ng-transclude></span>', 
     replace: true, 
     bindToController: true, 
     scope: { 
      model: '=' 
     }, 
     transclude: true, 
     link: function (scope, element, attrs) { 
      scope.localFunction = function() { 
       scope.model.value = scope.$id; 
      }; 
      scope.$watch('model.value', function() { 
       if (scope.model.value === scope.$id) { 
        scope.selected = "active"; 
       } else { 
        scope.selected = ''; 
       } 
      }); 
     } 
    }; 
    return directiveDefinitionObject; 
});

來源

2015-09-22 Manwal

我想你現在舊的方式和新途徑之間的一半。我開始使用'bindToController：{model：'='}，作用域：{}，' –

@SimonH是的。但是，這些信息還不夠。 – Manwal

如果你創建了一個plnkr，很高興在它上面工作 –

請問您可以在您的指令中加入這個。

element.parent().parent().children().each(function() { 
    $(this).find('a').removeClass('active'); 
}); 
element.addClass('active');

來源

2015-09-22 13:07:36

是的，這是工作，但是，這是否正確的方式來做到這一點（迭代每個元素）？使用JavaScript我已經取代了'$（this）.find（'a'）。removeClass（'active'）;'line with'angular.element（this.querySelector（'a'））。removeClass（'active'）; '。我很想知道爲什麼我的方式不工作。 – Manwal

http://jsfiddle.net/hngzxmda/1/

我建議你使用的指令也controllerAs

angular.module('directives', []).directive('toggleClass', function() { 
    var directiveDefinitionObject = { 
     restrict: 'A', 
     template: '<span ng-click="vmd.localFunction()" ng-class="selected" ng-transclude></span>', 
     replace: true, 
     bindToController: { 
      model: '=', 
      $id: '=' 
     }, 
     scope: {}, 
     transclude: true, 
     controller: function() { 
      var _this = this; 
      this.localFunction = function() { 
       _this.model.value = _this.$id; 
      }; 
     }, 
     controllerAs: 'vmd' 
    }; 
    return directiveDefinitionObject; 
});

來源

2015-09-22 13:17:58

控制器與指令不起作用

回答

相關問題