Angular指令模板上的增量值

这是我的问题，我想将带有模板的指令应用于页面上的元素，并在其上增加值。Angular指令模板上的增量值

我的问题是我的值保持在0，我在stackoverflow上尝试了很多答案，但没有成功与他们，我很新的角度。

这里是我的指令：

app.directive('loader', function ($window) { 

return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    controller: function($scope){ 
     if (!$scope.counter) 
      $scope.counter = 0; 
     else 
      $scope.counter++; 
    }, 
    template: '<div ng-class=\"({ \'display-opacity\' : ready{{counter}} })\" ng-transclude></div>', 
}; 

});

的要求，这里是我的哈巴狗模板：

loader 
    | test 
loader 
    | test

来源

2017-04-06 Sunkhern

你能告诉我们你的html，你在哪里“调用”这个指令？ – Brakebein

编辑显示模板 – Sunkhern

和'装载机 |测试“结果到什么HTML？（对不起，我不知道帕格）。但我想，现在我明白你想达到的目标。 – Brakebein

念叨transclude选项的文档，我打算写的东西后（见下文），但玩了Codepen后，我变得更加困惑。我认为，你想要做的事情是相当困难的。

一个快速（也许很脏）的解决方案将是为您的柜台使用服务。 https://codepen.io/anon/pen/vxwpxo

app.directive('loader', function(myCounter) { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: {}, 
    template: '<div>{{opacity}}</div>', 
    link: function(scope) { 
     scope.opacity = myCounter.get(); 
    } 
    }; 
}); 

app.factory('myCounter', function() { 
    var counter = 0; 

    return { 
    get: function() { 
     return counter++; 
    } 
    }; 
});

上的想法：

的transclude选项更改范围嵌套的方式。它使得一个transcluded指令的内容具有任何范围在指令之外的内容，而不是内部的任何范围。这样做，它可以让内容访问外部范围。

请注意，如果指令没有创建自己的作用域，那么scope将在scope.name = 'Jeff';引用外部作用域，我们将在输出中看到Jeff。

https://code.angularjs.org/1.4.6/docs/guide/directive

我不知道，如果有你的指令之外的控制器，其中counter定义。如果是，则您的指令控制器中的代码不会更改counter的值（如果我已正确理解文档）。如果不是，那么每条指令都会实例化它自己的counter，并且因为它还没有设置，所以if (!$scope.counter)将始终为真。如果该指令具有独立的范围，则表现不同。我很困惑！

来源

2017-04-06 15:45:30 Brakebein

Angular指令模板上的增量值

回答

相关问题