Question

我有这段代码（已更新）

HTML

<body ng-controller="MainCtrl">
    <form name="form" novalidate>
      <directive form="form.test" required
      ><input type="text" ng-model="text" name="test" required="true" /></directive>
      <button ng-click="click()">Click me</button>
    </form>
  </body>

的Javascript

app.controller('MainCtrl', function($scope) {
  $scope.click = function(){
    console.log('click');
  }
});

app.directive('directive', function() {
  return {
    transclude: true,
    replace: true,
    scope: {
      form: '=',
    },
    template: '<div>',
    link: function(scope, element, attrs, ctrl, transcludeFn) {
      var inputDiv = angular.element('<div>')
      transcludeFn(scope, function(clone){
        inputDiv.append(clone);
      })
      element.append(inputDiv);
      scope.$watch(function(){
        return scope.form.$error;
      }, function(newValue){
          console.log('newValue', newValue);
      }, true)
    }
  }
});

每次单击按钮，我都会收到错误的表单未定义。在这里试试：http://plnkr.co/edit/pl76wo4AJiGH0m7b5NQd?p=preview

Answer 1

我看到有两件事可以更改，首先我要在文字输入中添加ng-model属性和ng-required属性，以便使用模型＆＃39;跟踪错误。 s控制器

<input type="text" ng-model="test" ng-required="true" />

接下来你需要在$ watch上包含objectEquality参数，因此它会监视$ error对象属性的更改

scope.$watch(function(scope) {
  return scope.form[scope.toWatch].$error;
}, function(newValue) {
  // newValue will be the $error object from the input
}, true); // notice the last true value here, that's the objectEquality parameter

这是一个更新的plnkr：http://plnkr.co/edit/LnGhWgZF5ZbnqRUxh4gP?p=preview

将表单传递给指令：undefined

1 个答案: