javascript - AngularJS : pass ng-model from directive component to controller

Question

受 Angular ui 的启发，我想将前端库创建为一个组件，全部作为 AngularJS 指令。这样用户只需对指令进行一些配置即可得到组件想要的结果。

这就是指令的样子。

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

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

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

(我使用组件名称模型的原因是因为组件指令模板可能有多个模型) Controller 中的代码将是

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

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

1. 如何使用此语法使 Controller 到达指令范围？就我而言， Controller 似乎没有注意到指令范围(请参阅我在 plunker 中的代码)

2. 现在我还坚持将模型传递给模板。正如您在指令中看到的，我定义了 date-picker-model="myModel1" ，然后指令将捕获 attrs 并将其传递给这样的模板

   if('datePickerModel' in attrs){
        $scope.datePickerModel = attrs.datePickerModel;
   }
   

   当我在 templateUrl 上使用表达式时，ng-model="{{datePickerModel}}"不起作用

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

谢谢:-)

Answer 1

通过创建指令来查看范围参数。您可以在其中分配 Controller 和指令范围之间的 2 路绑定(bind)。

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

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