AngularJS：由其父代追加的子指令找不到其父控制器

我正在構建一個指令，該指令將創建一個輸入列表。當你開始在第一個輸入中輸入信息時，在你正在工作的那個下面附加一個空輸入。AngularJS：由其父代追加的子指令找不到其父控制器

我有這個plunkr工作的第一個輸入。麻煩的是第二個輸入不會附加任何東西。

我得到這個錯誤：錯誤：[$ compile：ctreq]找不到指令'child'所需的控制器'parent'！

我懷疑我需要去添加不同的新輸入，但我不確定如何。

我已經檢查了其他帖子在堆棧溢出，他們已經得到了這個有幫助，但他們都沒有解決與父控制器保持溝通的問題。

這裏是父指令：

app.directive('parent', function() { 
    return { 
    restrict: 'AE', 
    template: '<child name="0"></child>', 
    controller: function($scope, $compile, $element) { 

     // adds a new input within the parent 
     this.addChild = function(counter) { 
     $element.append($compile('<child name="' + counter + '"></child>')($scope)); 
     } 
    } 
    } 
});

這裏是孩子的指令：

app.directive("child", function() { 
    return { 
    restrict: "E", 
    scope: {}, 
    replace: true, 
    require: '^parent', 
    controller: function($scope, $attrs) { 

     $scope.x = $attrs; 
     $scope.directiveModel = ""; 

     $scope.$watch('directiveModel', function() { 
     $scope.$parent.myModel[$attrs.name] = $scope.directiveModel; 
     }); 

    }, 
    template: '<div><input type="text" name="{{x.name}}" ng-model="directiveModel"></div>', 
    link: function($scope, $element, attr, parentCtrl) { 
     var fieldCounter = 0; 
     var oldLength = 0; 
     $scope.$watch('directiveModel', function() { 
     // logic to determine if a new input needs to be added based on directiveModel's length 
     // only add inputs when directiveModel.length is going from 0 to 1 
     if ($scope.directiveModel.length == 1) { 
      if (oldLength === 0) { 
      fieldCounter++; 
      parentCtrl.addChild(fieldCounter); 
      } 
     } else if ($scope.directiveModel.length === 0) { 
      if (oldLength == 1 && fieldCounter > 0) { 
      fieldCounter--; 
      $element.remove(); 
      } 
     } 

     oldLength = $scope.directiveModel.length; 
     }, true); 
    } 

    }; 
});

，這裏是標記

<body ng-controller="MainCtrl"> 
    <parent></parent> 

    <pre>{{myModel | json}}</pre> 
    </body>

來源

2014-04-29 Kory

請代碼添加到你的問題中您的標記，而不僅僅是plunkr –

像ogc-nick說的：請添加你的代碼 – displayname

觀察： - 如果你繼續輸入在第一個字段上，然後刪除所有內容，然後重新寫入。它成功地不斷創建新的輸入字段 - 我認爲問題是與範圍。你的第一個子指令（父模板中的指令）自然會創建一個實際上是父指令範圍的範圍，但所有其他指令都有自己的範圍。檢查它的開發工具，檢查元素。 - 我也嘗試過發射和接收。相同的結果。 - 所以只有你的第一個指令是健康的創造，它不斷創造新的孩子。也許試着從那裏出發。

來源

2014-04-29 23:31:28

我放棄了父母和孩子的指示的整個想法。相反，我使用了一個處理所有數據操作的指令，並對存儲的數據執行了ng-repeat。

這裏是我的app.js文件

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $compile, $element) { 
    $scope.myModel = [ 
        { 
         value: "" 
        } 
    ]; 
}); 

app.directive("stackingInput", function() { 
    return { 
     restrict: "E", 
     scope: { 
      item: "=", 
      index: "=" 
     }, 
     replace: true, 
     template: '<div><input type="text" ng-model="item.value"></div>', 
     controller: function($scope, $element, attr){ 
      var fieldCounter = 0; 
      var oldLength = 0; 
      $scope.$watch('item', function() { 
        if ($scope.item.value.length == 1) { 
         if (oldLength === 0) { 
          fieldCounter++; 
          $scope.$parent.myModel.push({value: ""}); 
         } 
        } 
        else if ($scope.item.value.length === 0) { 
         if (oldLength == 1 && fieldCounter > 0) { 
          fieldCounter--; 
          $scope.$parent.myModel.splice($scope.index, 1); 
         } 
        } 

        oldLength = $scope.item.value.length;     
      }, true); 
     } 
    }; 
});

然後，你可以，你可以將此行添加到NG-controller元素

<stacking-input ng-repeat="item in myModel" item="item" index="$index"></stacking-input>

來源

2014-04-30 15:13:47 Kory

AngularJS：由其父代追加的子指令找不到其父控制器

回答

相關問題