3

我应该为我的指令赋予什么范围，以便输入显示初始值 "Toto" ？我不想接受范围：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

4

1 回答 1

8

我想这是人们在使用 AngularJS 指令和作用域时经常遇到的事情之一。要理解下面的解决方案和建议，我们需要了解关于 AngularJS DOM 元素和范围的一件事：

在 AngularJS 中，任何单个 DOM 元素都与一个且只有一个范围相关联。

这意味着我们不能让给定元素上的属性子集在一个范围内工作，而另一个子集在不同范围内工作。这正是您在 plunker 中尝试做的事情，您希望该ng-model属性与一个范围（由指令在<body>元素上定义的范围）和另一个范围（在指令中创建的隔离的范围）一起工作。ng-controllercustomattr

您基本上有两种方法可以摆脱这种情况：

1)ng-model="$parent.value.name"用于明确地将 ng-model 指令指向某个范围。但这很脆弱且不明显。

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

于 2013-04-22T11:21:36.833 回答