Question

我应该给我的指令赋予什么范围，以便输入显示初始值“Toto”？我不想占用范围：true

HTML code：

<!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) {

          } 
      }; 
    });

此处有采访者： http://plnkr.co/edit/JxWElWhTeBbNpFHS0wYT

Answer 1

我想这是人们经常使用AngularJS指令和范围遇到的问题之一。要理解下面的解决方案和建议，我们需要了解AngularJS DOM元素和范围的一个方面：

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

这意味着我们不能让给定元素上的属性子集与一个范围和另一个具有不同范围的子集一起使用。这正是您在plunker中尝试执行的操作，您期望ng-model属性与一个范围（<body>元素在ng-controller元素上定义的范围）和customattr与另一个范围 - 在指令中创建的孤立范围。）

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

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

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

范围破坏输入的ngmodel的指令

1 个答案: