AngularJS - 在控制器中未定義的ng-repeat中的表單

我試圖訪問我的控制器中的表單對象。表單位於ng-repeat塊內部，它具有動態名稱，我應該能夠從V1.3開始訪問它。AngularJS - 在控制器中未定義的ng-repeat中的表單

JS：

var app = angular.module('app', []); 
app.controller('AppCtrl', ['$scope', function($scope) { 
    $scope.forms = [0]; 
    $scope.testForm = function() { 
    if($scope.form0 == undefined) { 
     $scope.test = 'Form is NOT defined'; 
    } else { 
     $scope.test = 'Form is defined'; 
    } 
    } 
}])

HTML：

<body ng-app="app"> 
    <div ng-controller="AppCtrl"> 
    <div ng-repeat="form in forms" ng-init="formName = 'form' + $index"> 
     form name should be {{formName}} 
     <form name="{{formName}}"> 
     <input type="text" name="field" /> 
     </form> 
    </div> 
    <button ng-click="testForm()">Check if form exists</button> 
    <p ng-bind="test"></p> 
    </div> 
</body>

但在我的控制器$ scope.form0是不確定的 - 之後點擊「檢查是否存在形式」我得到的「形式不是定義」消息。即使我給它一個靜態名稱（<form name="form0">），我仍然不確定。當我從ng-repeat循環中取出表單時，它工作正常。

任何想法爲什麼沒有設置？

上面的例子： https://plnkr.co/edit/Fvy5LdIO0H1vCS9wYR0U?p=preview

提前感謝！

來源

2016-08-12 hopsey

這是因爲ng-repeat正在創建獨立的子作用域，form0在子作用域中，並且從父級（控制器的作用域）不可見。

所以解決辦法是把它傳遞給父母。但是我們不能在ng-init中執行它，因爲表單控制器到那時還沒有初始化。

我能想到的一種方法是使用自定義指令將formController綁定到指定範圍。

app.directive("form",function($parse){ 
    return{ 
    restrict:"E", 
    priority:-1, 
    link:function(scope,ele,attrs){ 
     var targetScope = $parse(attrs.bindToScope)(scope); 
     if(targetScope){ 
     targetScope[attrs.name] = scope[attrs.name]; 
     } 
    } 
    } 
})

用這個，我們可以告訴窗體將控制器綁定到我們指定的範圍。

<form name="{{formName}}" bind-to-scope='$parent' > 
    <input type="text" name="field" /> 
</form>

來源

2016-08-12 02:26:48 MMhunter

AngularJS - 在控制器中未定義的ng-repeat中的表單

回答

相關問題