指令与输入范围破坏ngmodel

问题描述：

我应该给我的指令什么范围，以便输入显示初始值“TOTO”？我不想拿范围：真指令与输入范围破坏ngmodel

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

答

我想这是一个人们经常用AngularJS指令和范围碰到的东西。要了解解决方案，下面我们要明白一件事AngularJS DOM元素和范围建议：

在AngularJS任何单一的DOM元素与一个且只有一个范围有关。

这意味着我们不能在给定元素上使用一个属性的子集来处理一个作用域和另一个具有不同作用域的子集。这正是你想要在你的翻车机中做的，你希望ng-model属性能够与一个示波器（在<body>元素上由ng-controller指令定义）和另一个示波器中的customattr一起工作 - 在指令中创建的隔离区）。

你已经有了基本方法摆脱这种局面：

1）使用ng-model="$parent.value.name"到NG-模型指令明确指出在一定范围内。但这是脆弱的，并不明显。

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

好的。我知道customattr和ng-model有不同的范围，但我想我可以通过在一个变量上使用范围绑定“=”（我不知道哪一个）。绑定“=”不是调和两个不同范围的主要点？重点是我希望范围受到限制，以便我的指令更一般。 – JohnCastle 2013-04-22 11:35:32

@JohnCastle那些是两个不同的问题。问题是，通过使用scope = {val：'='}语法，您正在为此DOM元素创建一个新的，隔离的作用域，并遇到上述问题。 – 2013-04-22 11:39:09

@JohnCastle还有一件事 - 如果你能详细说明你的真实用例，也许我可以提出一个解决方案。 – 2013-04-22 11:43:25

指令与输入范围破坏ngmodel

相关推荐