Angularjs 控制器与指令一样不工作

我想通过点击引导模块来完成可滚动的内容。工作正常。以下是我的指令代码：

'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

。通过这种方式，我发现可以将class

active

应用于当前的

li

，并从其他类中删除。它在没有控制器的情况下工作，但有一次我添加了控制器，因为它停止了工作，并给出了一些范围错误

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

var-app=angular.module（'app'，['directives']）；
app.controller（'firstController'，[function（）{
var vm=这个；
vm.model={value:'dsf'}；
}]);
角度.module（'directives'，[]）.directive（'toggleClass'，function（）{
var directiveDefinitionObject={
限制：“A”，
模板：“”，
替换：正确，
bindToController：对，
范围：{
型号：'='
},
是的，
链接：函数（范围、元素、属性）{
scope.localFunction=函数（）{
scope.model.value=范围$id；
};
范围$watch（'model.value'，函数（）{
if（scope.model.value==scope.$id）{
scope.selected=“active”；
}否则{
scope.selected=''；
}
});
}
};
返回directiveDefinitionObject；
});

请您将此添加到指令中

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

我建议在您的指令中也使用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;
});

angular.module（'directives'，[]）.directive（'toggleClass'，function（）{
var directiveDefinitionObject={
限制：“A”，
模板：“”，
替换：正确，
bindToController：{
型号：'='，
$id:“=”
},
作用域：{}，
是的，
控制器：函数（）{
var_this=这个；
this.localFunction=函数（）{
_this.model.value=\u this.$id；
};
},
controllerAs:“vmd”
};
返回directiveDefinitionObject；
});

我想你现在已经走到了新旧道路的中间。我首先使用

bindToController:{model:'='}，scope:{}，

@SimonH-Yes可能是。但是这些信息是不够的。如果你创建了一个plnkr，很高兴继续工作it@SimonH我已经给出了

JsFiddle

的链接，该链接不起作用。是的，这是可行的，但是，这样做正确吗（迭代每个元素）？我用javascript替换了

$（this）.find（'a'）.removeClass（'active'）行与
angular.element（this.querySelector（'a'））.removeClass（'active'）。我很想知道为什么我的方法行不通。