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指令模板上的增量值

回答

相關問題