Question

$ setPristine在使用$ scope引用时工作正常，但似乎不能使用'controller as syntax'

在视图中

<h2>With Controller as syntax</h2>
<div ng-controller="FirstCtrl as first">
    <form name="form1" id="form" novalidate>
        <input name="name" ng-model="first.data.name" placeholder="Name" required/>
        <button class="button" ng-click="first.reset()">Reset</button>
    </form>
    <p>Pristine: {{form1.$pristine}}</p>
    <p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
<hr>

<h2>With $scope</h2>
<div ng-controller="SecondCtrl">
    <form name="form1" id="form" novalidate>
        <input name="name" ng-model="data.name" placeholder="Name" required/>
        <button class="button" ng-click="reset()">Reset</button>
    </form>
    <p>Pristine: {{form1.$pristine}}</p>
    <p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>

在app.js中：

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

app.controller('FirstCtrl', function() {
  'use strict';
  var vm = this;
  vm.data = { "name": ""};

    vm.reset = function() {
      vm.data.name = "";
      vm.form1.$setPristine();
    }
});

app.controller('SecondCtrl', function($scope) {
  'use strict';
  $scope.data = { "name": ""};

    $scope.reset = function() {
      $scope.data.name = "";
      $scope.form1.$setPristine();
    }
});

以下是plunker：http://plnkr.co/edit/VcgZx3?p=preview

Answer 1

即使您使用controller as语法，表单和其他属性仍然绑定到范围而不是绑定到控制器实例，因此您仍然必须使用$scope.form1.$setPristine();来设置表单的状态。

var app = angular.module('my-app', [], function() {})

app.controller('FirstCtrl', function($scope) {
  'use strict';
  var vm = this;
  vm.data = {
    "name": ""
  };

  vm.reset = function() {
    vm.data.name = "";
    $scope.form1.$setPristine();
  }
});

app.controller('SecondCtrl', function($scope) {
  'use strict';
  $scope.data = {
    "name": ""
  };

  $scope.reset = function() {
    $scope.data.name = "";
    $scope.form1.$setPristine();
  }
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

<div ng-app="my-app">
  <h2>With Controller as syntax</h2>
  <div ng-controller="FirstCtrl as first">
    <form name="form1" id="form" novalidate>
      <input name="name" ng-model="first.data.name" placeholder="Name" required/>
      <button class="button" ng-click="first.reset()">Reset</button>
    </form>
    <p>Pristine: {{form1.$pristine}}</p>
    <p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
<hr/>

<h2>With $scope</h2>
<div ng-controller="SecondCtrl">
  <form name="form1" id="form" novalidate>
    <input name="name" ng-model="data.name" placeholder="Name" required/>
    <button class="button" ng-click="reset()">Reset</button>
  </form>
  <p>Pristine: {{form1.$pristine}}</p>
  <p> <pre>Errors: {{form.$error | json}}</pre> </p>
</div>
</div>

Answer 2

使用Arun建议通过<h2>With Controller as syntax</h2> <div ng-controller="FirstCtrl as first"> <form name="first.form1" id="form" novalidate> <input name="name" ng-model="first.data.name" placeholder="Name" required/> <button class="button" ng-click="first.reset()">Reset</button> </form> <p>Pristine: {{first.form1.$pristine}}</p> <p> <pre>Errors: {{form.$error | json}}</pre> </p> </div> <hr>访问表单的另一种方法是确保通过控制器访问表单。

要做到这一点，您只需将＆＃39;控制器的HTML更改为＆＃39;版本非常轻微。更改表单的名称以包含控制器对象，还可以从模板更改对表单的任何引用以包含控制器变量：

income = 0
list = [ ]

while True:

    price = input("Input price (adjustment price=q, cancel price=x) : ")

    income = sum(list)

    if price == 'q':

        print("Sum is : ", income)

        break

    elif price == 'x':

        list.pop()

        print(list.pop() , "is canceled")

    elif #something add here :
        print("retry")

    else:
        list.append(int(price))

您的Javascript现在将保持不变。

Answer 3

我认为更简单的方法是将表单控制器作为reset()函数的参数提供：

…
<button class="button" ng-click="reset(form1)">Reset</button>
…

并稍微更改reset()函数，以便它使用提供的参数：

$scope.reset = function(form) {
  $scope.data.name = "";
  form.$setPristine();
}

Answer 4

您可以使用$ setPristine而不使用$ scope：

  <form ng-submit="$ctrl.save()" name="$ctrl.myForm">

在你的控制器中：

var $ctrl = this;
 ...   
$ctrl.myForm.$setPristine();
$ctrl.myForm.$setUntouched();

它对我有用。（ AngularJS v1.5.7 ）

Angularjs $ setPristine不使用控制器作为语法

4 个答案: