这是我的问题，我想将带有模板的指令应用于页面上具有递增值的元素。
我的问题是我的值保持为0，我在stackoverflow上尝试了许多答案，但没有成功，我对angular还是很陌生。
这是我的指令：
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
最佳答案
阅读有关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选项更改范围的嵌套方式。这样可以使被包含的指令的内容具有该指令外部的任何作用域，而不是内部的任何作用域。这样，它可以使内容访问外部范围。请注意，如果指令没有创建自己的作用域，则
scope中的scope.name = 'Jeff';将引用外部作用域，我们将在输出中看到Jeff。https://code.angularjs.org/1.4.6/docs/guide/directive
我不知道，是否在定义
counter的指令之外有控制器。如果是，则指令控制器中的代码将不会更改counter的值（如果我正确理解了文档）。如果否，则每个指令将实例化其自己的counter，并且由于尚未设置它，因此if (!$scope.counter)始终为true。而且，如果该指令具有隔离范围，其行为也有所不同。我很困惑！