Question

我想创建一个指令，我可以添加ng-model。我的指示是：</ p>

app.directive('date', function() {
return {
      restrict: 'E',
            scope: {
                year:'=ngModel',
            },
            template: '' +
            '<div> ' +
            '   <div > ' +
            '       <div> ' +
            '               <input class="control" type="text" ng-model="year"/> ' +
            '   </div> ' +
            '</div>',
    require: 'ngModel',
    replace: true
   };
 });

当在html页面中我添加此指令时

 <date year='orderDate.year'> </date>

这个指令ng-model名称是年份，而我想它是orderDate.year

Answer 1

你在孤立范围内所做的就是说你的指令的属性ngModel应该在你的隔离范围内调用一年，所以当你使用你的指令时你应该使用它：

myDash.controller("dbOverviewCtrl", function($scope, $routeParams, dbDataService){

    $scope.items = dbDataService.getData();

});

或将范围定义更改为：

 <date ng-model='orderDate.year'> </date>

Answer 2

你非常接近。在指令控制器内部，您只需将隔离范围定义更改为：

scope: {
         year:'=year',
       }

由于您的属性名称与隔离范围中的属性名称相同，因此上述内容等于：

scope: {
         year:'=',
       }

工作示例：http://plnkr.co/edit/HrL1NdZirXBeG3pm8FiP?p=preview

有关在指令中创建范围的更多信息，请访问：Angular Docs - Directives

如何在Angularjs中将ng-model添加到指令模板

2 个答案: