AngularJS - 如何將html屬性變量值傳遞給指令？

Question

... ...

UPDATE

HTML

<my-directive ng-repeat="item in items = (data | filter: {isExists: true})"> 
    something 
</my-directive> 
<my-second-directive counter="{{items.length}}"></my-second-directive> 

JS

angular.module('directives') 
.directive('myDirective', function() { 
    ... 
}) 
.directive('mySecondDirective', function() { 
    return { 
     restrict: 'EA', 
     transclude: false, 
     replace: true, 
     scope: { 
      counter: '@' 
     }, 
     template: '', 
     link: function (scope, element, attrs) { 
      alert(scope.counter); 
     } 
    }); 

對不起，我沒有描述我的闕好的。我的第一個指令應該是ngRepeated，帶過濾器。但在我的第二個指令中，我想允許顯示一個計數器，第一個指令當前有多少實例化，因爲用戶將能夠添加和刪除實例。所以我想通過第二個指令飛行來獲取items.length的值。但是第二個指令的link（）方法在ngRepeat之前被觸發，所以計數器的值將是一個空字符串。

預先感謝

UPDATE 2

.directive('cardGroupHeader', function($templateCache){ 
    return { 
     restrict: 'EA', 
     transclude: true, 
     replace: true, 
     require: '^cardGroup', 
     scope: { 
      cbiscounter: '=?', 
      cbcounter: '=?', 
      cbisarrow: '@?' 
     }, 
     template: $templateCache.get('card-group-header-tpl.html'), 
     link: function(scope, $element, $attrs, cardGroupController) { 
      scope.rowId = cardGroupController.getCurrentId(); 
      console.log(scope.cbcounter); 

      scope.toggle = function() { 
       cardGroupController.toggle(scope.rowId) 
      } 
      angular.element(document).ready(function() { 
       console.log(scope.cbcounter); 
      }); 

      scope.$watch('scope.cbcounter', function (n, o) { 
       if(n && n != o) { 
        console.log(n); 
       } 
      }); 
      //scope.cbcounter++; 
     } 
    }; 
}) 

HTML

<card-group-header cbiscounter="true" cbarrow="true" cbcounter="data.length">Waiting for Approval</card-group-header> 
    <card-group-row cbCollapsed="false"> 
     <card ng-repeat="approveItem in data = (approveItems | filter: {isApproved: false, isRejected: false})"> 

TEMPLATE

$templateCache.put('card-group-header-tpl.html', '<div class="card-group-header" ng-click="toggle()"><span ng-transclude></span><span class="card-group-counter" ng-if="cbiscounter">{{cbcounter}}</span></div>'); 

WHE n我將data.length更改爲2，這個轉移良好。如果我使用data.length，則scope.cbcounter總是未定義。在2的情況下，我找回了console.log(scope.cbcounter);

Answer 1

counter: '@'表示您正在接受字符串值。如果你想傳遞一個表達式，你既可以使用：

<my-second-directive counter="{{ items.length }}"></my-second-directive> 

或者：

.directive('mySecondDirective', function() { 
    return { 
     restrict: 'EA', 
     transclude: false, 
     replace: true, 
     scope: { 
      counter: '=' // Accept two ways binding 
     }, 
     template: '', 
     link: function (scope, element, attrs) { 
      alert(scope.counter); 
     } 
    }); 

編輯： 我終於很明白的問題！這是因爲屬性直到鏈接階段之後才被插值。您有以下兩種選擇：

第一種選擇是在裏面$timeout鏈接包裝每把它從事件循環路程，DOM後完成操作執行：

.directive('mySecondDirective', function ($timeout) { 
    return { 
     restrict: 'EA', 
     transclude: false, 
     replace: true, 
     scope: { 
      counter: '=' // Accept two ways binding 
     }, 
     template: '', 
     link: function (scope, element, attrs) { 
      $timeout(function() { 
       alert(scope.counter); 
      }); 
     } 
    }); 

其次，使用$observe：

attrs.$observe('counter', function(value){ 
console.log(value); 
}); 

或使用$watch作爲@ jusopi建議。

Answer 2

我認爲這將是你想要的。

的Html

<div ng-app="testapp" ng-controller="testctrl"> 

    <div ng-repeat="item in filtereditems"> 
     {{item}} 
    </div> 
    <testdir counter="filtereditems.length" /> 

</div> 

的Javascript

angular.module('testapp', []) 
.directive('testdir', function(){ 
    return { 
     restrict: 'E', 
     scope:{ 
      counter: '=' 
     }, 
     link: function(scope, element, attrs) { 
      alert(scope.counter); 
     } 
    } 
}) 
.controller('testctrl', function($scope, $filter){ 
    $scope.items = [ 
     {name: 'A', isExists: true}, 
     {name: 'B', isExists: false}, 
     {name: 'C', isExists: true}, 
     {name: 'D', isExists: false} 
    ]; 
    $scope.filtereditems = $filter('filter')($scope.items, {isExists: true}); 
}) 

My jsfiddle is here.

Answer 3

除了@ LVarayut的有關範圍的綁定表達式的答案，該警報是undefined的原因是因爲連接不的一部分週期爲$摘要週期。所以綁定和數據還沒有生效（不要引用我的意思，這是我可以用語言表達我在下面的代碼中展示的最佳方式）。

相反，你需要使用一個觀察者來觸發警報

link: ($scope, elem, attrs)-> 

    #undefined because linking isn't part of the $digest cycle 
    #alert $scope.count 

    $scope.$watch 'count', (n, o)-> 
    if n and n isnt o 
     true 
     #alert n 

http://plnkr.co/edit/xt95gb3cTXfUEHgpWK1W?p=preview