指令與輸入範圍破壞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

來源

2013-04-22 JohnCastle

我想這是一個人們經常用AngularJS指令和範圍碰到的東西。要了解解決方案，下面我們要明白一件事AngularJS DOM元素和範圍建議：

在AngularJS任何單一的DOM元素與一個且只有一個範圍有關。

這意味着我們不能在給定元素上使用一個屬性的子集來處理一個作用域和另一個具有不同作用域的子集。這正是你想要在你的翻車機中做的，你希望ng-model屬性能夠與一個示波器（在<body>元素上由ng-controller指令定義）和另一個示波器中的customattr一起工作 - 在指令中創建的隔離區）。

你已經有了基本方法擺脫這種局面：

1）使用ng-model="$parent.value.name"到NG-模型指令明確指出在一定範圍內。但這是脆弱的，並不明顯。

2）從屬性指令中刪除隔離的作用域。作爲一個經驗法則，我建議不要在輸入字段中使用屬性值的指令中使用隔離範圍（與ng-model一起使用）。您仍然可以通過使用$parse服務來獲取屬性的值。

來源

2013-04-22 11:21:36

好的。我知道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

回答

相關問題