angularjs - Controller 与指令一样不起作用

Question

我想通过单击 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 的情况下工作，但是一旦我添加了 Controller ，它就会停止工作并给出一些范围错误。

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;
});

Answer 1

您能否将其添加到您的指令中。

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