Question

受角度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 =＆＃34; myModel1＆＃34; 然后指令将捕获attrs并将其传递给模板，就像这样
```
if('datePickerModel' in attrs){
     $scope.datePickerModel = attrs.datePickerModel;
}
```
当我在templateUrl上使用表达式时，ng-model =＆＃34; {{datePickerModel}}＆＃34;没有工作

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

谢谢： - ）

Answer 1

通过创建指令来查看scope参数。在那里，您可以在控制器和指令范围之间分配双向绑定。

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

也要注意起始符号'='或'@'！

AngularJS：将指令组件中的ng-model传递给控制器

1 个答案: