范围破坏输入的ngmodel的指令

Question

范围破坏输入的ngmodel的指令

Joh*_*tle 3 angularjs angularjs-directive

我应该给我的指令赋予什么范围,以便输入显示初始值"Toto"？我不想占用范围:是的

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>

Run Code Online (Sandbox Code Playgroud)

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

          } 
      }; 
    });

Run Code Online (Sandbox Code Playgroud)

Plunker:http://plnkr.co/edit/JxWElWhTeBbNpFHS0wYT

Answer 1

pko*_*rce 8

我想这是人们经常使用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服务获取属性的值.

归档时间：	13 年，2 月前
查看次数：	2498 次
最近记录：	13 年，2 月前