在動態創建的元素上使用ng-model

Question

我有一個在運行時動態創建輸入元素的模板。我想將輸入到此輸入元素的數據捕獲到我的模型中。我正在嘗試使用ng-model來實現這一點。但是，它不工作。在檢查元素時，我發現正確的表達式已被綁定到ng-model，但它沒有更新我的模型。這裏是我的代碼：

模板：

<div child-ng-model="userReg.candidateData.PrimarySkills"> 
    <!-- this div creates an input element on runtime --> 
</div> 

指令：

(function (window) { 
    'use strict'; 

    angular.module('myApp.userRegistration.directive') 
    .directive('childNgModel', ['$compile', function ($compile) { 
     return { 
      restrict: 'A', 
      scope: { 
       childNgModel: '@' 
      }, 
      link: function (scope, element, attrs) { 
       var el = element.children().eq(0); 
       el.attr('ng-model', scope.childNgModel); 
       $compile(el)(scope); 
      } 
     } 
    }]); 
})(window); 

你可以看到正確的價值被分配到NG-模型如下：

文字我輸入字段中沒有被我的模型捕獲（userReg.candidateData.PrimarySkills）。這是爲什麼發生？我在這裏做錯了什麼？

Answer 1

問題在於您在指令中創建了隔離範圍。因此，ngModel無法寫入外部作用域變量。

嘗試以下操作：

(function (window) { 
    'use strict'; 

    angular.module('myApp.userRegistration.directive') 
    .directive('childNgModel', ['$compile', function ($compile) { 
     return { 
      restrict: 'A', 
      scope: true, // create a normal child scope 
      link: function (scope, element, attrs) { 
       var el = element.children().eq(0); 
       el.attr('ng-model', attrs.childNgModel); // just get the attribute value 
       $compile(el)(scope); 
      } 
     } 
    }]); 
})(window); 

Answer 2

模型不可用僞指令中。

你必須建立雙向綁定第一：

scope: { 
    childNgModel: '=' 

改變輸入的模式childNgModel：

el.attr('ng-model', "childNgModel"); 
$compile(el)(scope); 

現在輸入更新childNgModel指令，這本身就是內部鏈接到userReg.candidateData.PrimarySkills外部指令。

Answer 3

您正在使用'@'作爲插入字符串傳遞模型。

請用'='來代替。

如果你想包含在模型中的插值字符串，你需要用{{ child-ng-model="userReg.candidateData.PrimarySkills" }}

但是圍繞它，使用指令相同的名稱，並在指令模式是不好的做法。你最好爲模型創建一個屬性。

function MyController() { 
 
    this.userReg = {candidateData: {PrimarySkills:["123", "456", "789"]}}; 
 
} 
 
function childNgModel($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    scope: { 
 
     value: '=' 
 
    }, 
 
    link: function (scope, element, attrs) { 
 
     console.log(scope.value); 
 
    } 
 
    } 
 
} 
 

 
angular.module('app', []); 
 
angular.module('app') 
 
    .controller('MyController', MyController) 
 
    .directive('childNgModel', childNgModel);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MyController as ctrl"> 
 
    <div child-ng-model value="ctrl.userReg.candidateData.PrimarySkills"> 
 
    </div> 
 
    </div> 
 
</div>

或本

function MyController() { 
 
    this.userReg = {candidateData: {PrimarySkills:["123", "456", "789"]}}; 
 
} 
 
function childNgModel($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    scope: { 
 
     value: '@' 
 
    }, 
 
    link: function (scope, element, attrs) { 
 
     console.log(scope.value); 
 
    } 
 
    } 
 
} 
 

 
angular.module('app', []); 
 
angular.module('app') 
 
    .controller('MyController', MyController) 
 
    .directive('childNgModel', childNgModel);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MyController as ctrl"> 
 
    <div child-ng-model value="{{ctrl.userReg.candidateData.PrimarySkills}}"> 
 
    </div> 
 
    </div> 
 
</div>