AngularJS：将 ng-model 从指令组件传递给控制器答案

【问题标题】：AngularJS : pass ng-model from directive component to controllerAngularJS：将 ng-model 从指令组件传递给控制器
【发布时间】：2014-05-26 04:29:42
【问题描述】：

受 angular ui 的启发，我想将前端库创建为一个组件，全部作为 angularjs 指令。这样用户就可以简单的把指令加上一些配置，就可以得到组件想要的结果了。

这就是指令的样子。

<date-picker 
    date-format="MM.DD.YYYY HH:mm" 
    enable-navigation 
    date-picker-id="datetimepicker2"
    date-picker-model="myModel1">
</date-picker>

对于用法，想法是它可以由用户创建的控制器包装，并且控制器可以像这样到达指令范围。

<div ng-controller="myController">
   <date-picker 
         ...
       date-picker-model="myModel1">
   </date-picker>
</div>

（我使用component-name-model的原因是因为组件指令模板可能有多个模型）控制器中的代码将是

angular.module('myApp').controller('myController',['$scope', function($scope) {
     $scope.myModel1; //this scope binds to the datepicker template scope 
}]);

由于我对 angularJs 很陌生，所以我的问题如下。

如何使用这种语法使控制器到达指令范围？就我而言，控制器似乎没有注意到指令范围（请参阅我在 plunker 中的代码）
现在我还坚持将模型传递给模板。正如您在指令中看到的那样，我已经定义了 date-picker-model="myModel1" 然后指令将捕获 attrs 并将其传递给这样的模板
```
if('datePickerModel' in attrs){
     $scope.datePickerModel = attrs.datePickerModel;
}
```
当我在 templateUrl 上使用表达式时，ng-model="{{datePickerModel}}" 不起作用

代码很长，建议您查看我的plunker

谢谢你:-)

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

通过创建指令来查看范围参数。在那里你可以在控制器和指令的范围之间分配你的 2-way 绑定。

http://plnkr.co/edit/ngdoc:example-example85@snapshot?p=preview

<my-customer info="igor"></my-customer>


angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
  $scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
  };
});

也记录在这里：http://docs.angularjs.org/guide/directive

还要注意开头符号“=”或“@”！

【讨论】：