指令使用其他指令-AngularJS

Question

我有兩個指令，我想計算父親標記中有多少個兒子，並在JS文件后顯示在index.html中顯示計數器，問題是我沒有正確獲得數字

   module.directive('directiveFather', function () {

    return {

    restrict: 'E',
    scope: {},
    controller: function ($scope) {

        $scope.AllCounter = 0;

        this.addCounter = function () {

            $scope.AllCounter = $scope.AllCounter + 1;

        }

    }


}

}）

  module.directive('directiveSon', function () {

return {

    restrict: 'E',
    scope: {},
    require: '^directiveFather',
    link: function(scope, element, attrs, fatherCtrl){
      fatherCtrl.addCounter();
     }
    }


}

}）

<directive father>

 <directive son>

 </directive son>
 {{AllCounter}}

 </directive father>

Answer 1

如果您使用隔離范圍，那么directiveFather父親中的元素將被綁定到父范圍（因此AllCounter在視圖中將不直接可用-盡管它將保留正確的值）。

---

您可以在directiveFather scope: true/false中將scope: {}更改為scope: true/false （請參見演示1 ），或者
“手動”編譯，鏈接HTML並將其附加到directiveFather元素（請參閱演示2 ）。
（此外， Wildhoney也建議使用包含和template 。）

_{基本上，您不需要任何方法來工作-它們僅需證明一切正常（通過在視圖中顯示計數器）即可，但是即使不追加計數器， addChild()函數也將被調用為預期。}

---

也就是說，固定元素名稱（ <directive-father>和<directive-son> ）后，它會按預期工作。

---

另請參見這些簡短的演示： 演示1 ， 演示2 。