具有作用域的指令破坏输入的ngmodel

Question

具有作用域的指令破坏输入的ngmodel

3

我应该给我的指令什么作用域，才能使输入框显示初始值“Toto”？我不想使用scope:true。

HTML代码：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
   <input customattr type = "text" ng-model="value.name" />   
</body>
</html>

JS代码：

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

app.controller('MainCtrl', function($scope) {
  $scope.value = {"name":"Toto", "id":1};

});

    app.directive('customattr', function () {
      return {
          restrict: 'A',
          scope: {
          },
          link: function (scope, element, attrs) {

          } 
      }; 
    });

在这里查看Plunker： http://plnkr.co/edit/JxWElWhTeBbNpFHS0wYT

- JohnCastle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pkozlowski.opensource · Accepted Answer

我想这是使用AngularJS指令和作用域经常遇到的问题之一。为了理解以下的解决方案和建议，我们需要了解一个关于AngularJS DOM元素和作用域的事情：

在AngularJS中，任何单个的DOM元素都只与一个作用域相关联。

这意味着我们不能在给定元素上拥有一部分属性与一个作用域配合使用，而另一部分属性则与不同的作用域配合使用。这正是您在plunker中尝试做的事情，其中您期望ng-model属性与一个作用域（由ng-controller指令在<body>元素上定义）配合工作，而customattr则与另一个作用域 - 在指令中创建的隔离作用域配合使用）。

你基本上有两种方法来解决这个问题：

1）使用ng-model="$parent.value.name"来明确地指向ng-model指令到特定的作用域。但这很脆弱而且不明显。

2）从属性指令中删除隔离作用域。作为经验法则，我建议不要在与输入字段（与ng-model结合使用）作为属性指令使用的指令中使用隔离作用域。您仍然可以使用$parse服务获取属性的值。