0

我有一个指令：

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)内部。linkundefined

没有mydirectiveininput我可以毫无问题地看到该字段下的模型值。

有人可以解释一下模型保存在哪里吗？它在哪个范围内？

实时代码：

http://jsfiddle.net/E8QXz/

4

2 回答 2

1

由于您在指令定义中创建了一个范围对象，因此它创建了一个不从父范围继承的隔离范围。ng-model 和孤立的范围不能很好地工作。从 SO 看到这个

于 2013-07-30T05:54:11.557 回答
1

两件事情：

  1. 正如 Chandermani 所写，您在scope: { field: '=' },输入中引入了一个新范围。因此，您需要参考mymodelasng-model="$parent.mymodel"或 angular 将查看错误的范围。

    <input type="text" ng-model="$parent.mymodel" mydirective field="123" />

  2. $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/

于 2013-07-30T09:48:27.557 回答