如何訪問動態創建的FormController？

Question

我有一系列項目。 每個項目將通過使用ng-repeat和ng-form動態關聯到一個ng-form 。

<div ng-repeat="person in people" ng-form="person.$form">
    ...
</div>

然后我有可能創建新項目。 但是當我這樣做時，我希望他們的新形式變臟。

<button type="button" ng-click="addPerson()">ADD NEW ONE...</button>

在控制器中：

$scope.addPerson = function() {
  var p = {
    name: 'Charles',
    color: 'green'
  };
  $scope.people.push(p);

  p.$form.$setDirty(); // <----- THIS WON'T WORK
};

正如上面的評論所寫的，這行不通。 它嘗試在FormController創建之前執行該指令。

到目前為止，我無法為此找到任何解決方案，也無法在這里找到完全相關的回答問題。

這是此示例的 Plunker，其中包含一些按鈕和標簽，可用於處理臟和原始狀態。

Answer 1

創建一個自定義指令來初始化表單：

app.directive("initForm", function() {
  return {
    link: postLink,
    require: 'form'
  }
  function postLink(scope,elem,attrs,form) {
    form.$setDirty();
  }
})

並在 HTML 中使用它：

<div ng-repeat="person in people" init-form ng-form="person.$form">
    ...
</div>

演示

 angular.module('app', []) .controller('MainCtrl', function($scope) { $scope.people = [ {name: 'Alice', color: 'pink' }, {name: 'Bob', color: 'blue' } ]; $scope.addPerson = function() { var p = { name: 'Charles', color: 'green' }; $scope.people.push(p); //p.$form.$setDirty(); }; }) .directive("initForm", function() { return { link: postLink, require: 'form' } function postLink(scope,elem,attrs,form) { form.$setDirty(); } })

 .ng-pristine { background-color: #E0F8F7; } .ng-dirty { background-color: #F5A9BC; } .bigform.ng-pristine { background-color: #5882FA; } .bigform.ng-dirty { background-color: #FF0040; } .bigform { padding: 20px; }

 <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="MainCtrl"> <div ng-form="mainForm" class="bigform"> <div ng-repeat="person in people" init-form ng-form="person.$form"> <p>{{personIndex}}</p> <input type="text" ng-model="person.name" /> <input type="text" ng-model="person.color" /> <button type="button" ng-click="person.$form.$setPristine()">RE-PRISTINATE</button> <label>form is <span ng-show="person.$form.$dirty">dirty</span><span ng-show="person.$form.$pristine">pristine</span></label> <br /> </div> <br /> <br /> <button type="button" ng-click="mainForm.$setPristine()">RELOAD</button> </div> <br /> <br /> <button type="button" ng-click="addPerson()">ADD NEW ONE...</button> </body>

如何訪問動態創建的FormController？

問題描述

1 個解決方案

解決方案1
2 已采納 2017-09-26 16:04:32

演示

如何訪問動態創建的FormController？

問題描述

1 個解決方案

解決方案1 2 已采納 2017-09-26 16:04:32

演示

解決方案1
2 已采納 2017-09-26 16:04:32