Question

我有一个指令：

app.directive('mydirective', function () {
    return {
        scope: {
            field: '='
        },
        require: 'ngModel',
        link: function (scope, element, attrs, contr) {
            contr.$parsers.unshift(function (value) {
                console.log(scope.mymodel);
            });
        }
    }
});

我有一个使用指令

的表单

<form ng-submit="submit()">
  <input type="text" ng-model="mymodel" mydirective field="123" />
  <div>{{mymodel}}</div>
</form>

input元素的模型设置为mymodel。在input下我想显示此模型的值。

问题是未呈现值{{mymodel}}。当我在mymodel字段中输入时，当前$scope中的input似乎永远不会发生变化。

我认为这是因为该指令创建了另一个范围，但console.log(scope.mymodel)函数内的link也输出了undefined。

mydirective中没有input我可以在字段下看到模型的值，没有任何问题。

有人可以解释保存模型的位置吗？它在哪个范围？

直播代码：

http://jsfiddle.net/E8QXz/

Answer 1

由于您已在指令定义中创建了作用域对象，因此它创建了一个独立的作用域，该作用域不从父作用域继承。 ng模型和隔离范围不能很好地工作。 See this from SO

Answer 2

两件事：

正如Chandermani写的那样，你在输入中引入了一个带有scope: { field: '=' },的新范围。因此，您需要将mymodel引用为ng-model="$parent.mymodel"，否则angular会查看错误的范围。
```
<input type="text" ng-model="$parent.mymodel" mydirective field="123" />
```

$parsers应该返回一个值，否则解析器链就会被破坏。

ctrl.$parsers.unshift(function (value) {
  console.log(value);
  return value; // <- add this
});

固定代码（原谅重组;））：

(function (app, ng) {
  app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.submit = function submit() {
      console.log('submit');
    };
  }]);

  app.directive('mydirective', function () {
    return {
      require: 'ngModel',
      scope: { field: '=' },
      link: function (scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function (value) {
          console.log(value);
          return value; // <- add this
        });
      }
    };
  });
}(angular.module('myapp', []), angular));

演示：http://jsbin.com/uzixey/1/

如果使用指令，则看不到模型值

2 个答案: