Question

我正在尝试建立一个像这样的对象：
{"age":"21","name":"foo", "address":["address1", "address2"]}

对于我正在使用自定义指令的地址，我不知道如何将其附加到范围（person.address）。如果我给ng-model =＆＃34; person.address＆＃34;在指令中，它为两个输入文本采用相同的地址。我必须隔离范围，但不知道放在哪里。

小提琴：http://codepen.io/goutham2027/pen/EagPZG

HTML

   <div ng-controller="testCtrl">
     <form>
       Name: <input type="text", ng-model="person.name"> <br/>
       Age:  <input type="text", ng-model="person.age"> <br/>
       Address-1 <address> </address>
       Alternate-Address <address>  </address>
     </form>
     {{person}}
      </div>

JS

app.directive('address', function() {
  return {
    restrict: 'E',
    template: '<input type="text">'
  }
})

编辑：我发现了如何做到这一点。小提琴：http://codepen.io/goutham2027/pen/LEjaXP

Answer 1

只需在您的指令中添加一个独立的范围：

app.directive('address', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '='
    },
    template: '<input ng-model="ngModel" type="text">'
  }
})

http://codepen.io/anon/pen/raMxJo

Answer 2

尝试向控制器添加person属性。

app.controller('testCtrl', function($scope) {
  $scope.person = {age:"21",name:"foo", address:["address1", "address2"]};
});

至于使用自定义指令处理两个不同的地址字段，请使用@Rasalom的答案。

Answer 3

你应该给指令一个私有范围，如下：

scope: {
  model: '='
}

然后你就可以将它传递给你的指令：

<address model="address"></address>

在您的指令中，现在可以通过私有范围在HTML模板中使用该地址。

Answer 4

您可以使用隔离范围：

app.directive('address', function() {
  return {
    restrict: 'E',
    scope : {person:'='},
    template: '<input type="text" ng-model="person">'
  }
});

<div ng-controller="ctrl">
   <form>
     Name: <input type="text", ng-model="person.name">
     Age: <input type="text", ng-model="person.age"> <br/>
     Address-1: <address person="person.address1"> </address>
     Alternate-Address: <address person="person.address2"></address>
   </form>
</div>

CodePen 示例。

AngularJS自定义指令绑定到模型

4 个答案: