Javascript Angular js从指令触发ng类切换

我有一个指令，当达到某个条件时，它被触发来隐藏一个元素

     var hideElement = function(){
            el = element.find('.myelement');
            $(el).addClass('hideme');                          
     };

然后在一个条件中，我触发hideElement函数

 if(j >= count){
      hideElement ();
 }

我如何在局部上重构它以更改ng类

<div 
    data-directivename 
    data-increment="increment" 
    data-count="count" 
    ng-class="{'timetohide': hide}"
>
    <div class="myelement"></div>
</div>

---

我会这样做

Ng:

HTML

---

只需使用范围变量：

var hideElement = function(){
    scope.hide = true;
};

然后，您的

ng类=“{'timetohide'：hide}”

将正常工作-当

scope.hide

为真时，元素将获得

timetohide

类

---

更新

由于您在指令中使用的是隔离作用域，因此您实际上需要修改父作用域变量，因为ng类正在关注这个变量，因此上面的代码应该是：

var hideElement = function(){
    scope.$parent.hide = true;
};

请看这里：（我们所有评论后的版本）

解释来自：

作用域：{}（指令获取新的隔离作用域）

这是最有趣的部分。到目前为止，我们看到了创建指令作用域的两种情况。在第三种类型中，我们将把DDO中的scope属性设置为对象文本。当一个对象文本被传递到scope属性时，情况就有点不同了。这一次，将为该指令创建一个新的作用域，但它不会从父作用域继承。这个新的作用域也称为隔离作用域，因为它与其父作用域完全分离

---

有道理。

我的控制器和指令

return angular.module("portal").directive("doughnutIncrementor", [
        "Account",
        "Common",
        function (Account, Common) {
            var ctrl, linker;

            ctrl = function($scope){
                $scope.increment = 15;
                $scope.count = 5;
                $scope.isHide = false;
            },
            linker = function(scope, element, attrs) {


                var hideDoughnutIndicator = function(){
                    console.log('scope hide', scope.isHide); //here it is false as it should be
                    scope.isHide = true;
                    console.log('scope hide', scope.isHide); //then it becomes true - but has no impact on the ng-class which remains as "ng-isolate-scope"            
                };


                var j = 1;
                scope.$watch(attrs.increment, function(value) {
                    if(j >= scope.count){
                        hideDoughnutIndicator();
                    }
                    j++;
                });
            };

            return {
                restrict: 'A',
                templateUrl: Common.paths.partials + '/doughnut-incrementor.html',
                link: linker,
                controller: ctrl,
                scope: {                   
                    increment: "=",
                    count: "=",
                }
            };
        }
    ]);

我的部分

<div data-doughnut-incrementor data-increment="increment" data-count="count" ng-class="{hide : isHide}"></div>

我不明白-结果是class=“ng isolate scope”是的，当

scope.hide

变得真实时，ng类会将类更改为

“ng isolate scope timetohide”

。没有人，它不会接受它-我需要定义范围/我正在覆盖它吗？是否需要包含隐藏？返回{restrict:'A'，link:linker，controller:ctrl，scope:{increment:=”，count:=”，}；它应该在指令控制器中，所以您使用的是现有的作用域，下面是一个示例：（它变为红色而不是隐藏，单击以切换它）它将scope.isHide设置为true-但是类没有受到影响-有什么问题吗？我也尝试将其包装在$apply中，但是它得到一个错误，说“$digest已在进行中”. var hidedoughnotindicator=function（）{scope.$apply（function（）{scope.isHide=true；}）；}；doughnut-incrementor.html实际上有一个emtpy div“”，这似乎是一个指令范围问题，我会在几分钟后告诉您它的复杂性-因为我在这个指令之外更改了增量-这部分工作正常，但是它随后附加了这个ng类-这是一个问题-在尝试调用ng show中的更改时可能会遇到类似的问题-我已经发布了指令/控制器设置-它是这样的，因为我正在从另一个指令更改指令中的值

return angular.module("portal").directive("doughnutIncrementor", [
        "Account",
        "Common",
        function (Account, Common) {
            var ctrl, linker;

            ctrl = function($scope){
                $scope.increment = 15;
                $scope.count = 5;
                $scope.isHide = false;
            },
            linker = function(scope, element, attrs) {


                var hideDoughnutIndicator = function(){
                    console.log('scope hide', scope.isHide); //here it is false as it should be
                    scope.isHide = true;
                    console.log('scope hide', scope.isHide); //then it becomes true - but has no impact on the ng-class which remains as "ng-isolate-scope"            
                };


                var j = 1;
                scope.$watch(attrs.increment, function(value) {
                    if(j >= scope.count){
                        hideDoughnutIndicator();
                    }
                    j++;
                });
            };

            return {
                restrict: 'A',
                templateUrl: Common.paths.partials + '/doughnut-incrementor.html',
                link: linker,
                controller: ctrl,
                scope: {                   
                    increment: "=",
                    count: "=",
                }
            };
        }
    ]);

<div data-doughnut-incrementor data-increment="increment" data-count="count" ng-class="{hide : isHide}"></div>