将NgModelController传递给指令

将NgModelController传递给指令

我可以将NgModelController传递给指令控制器吗?这是必需的,因此我可以为控制器中的模型分配值。

此示例不起作用:

   angular
     .module('directives.selectBox', [])
     .directive('selectBox', selectBox);

    function selectBox() {
        return {
          restrict   : 'E',
          require    : 'ngModel',
          scope      : {
             list     : '=',
          },
          replace     : true,
          templateUrl : 'common/directives/selectBox/selectBox.html',
          controller :  SelectBoxController,
        };
    }
    function SelectBoxController(ngModel) {
       ngModel.$setViewValue(10); // ???
    }

最佳答案

实际上非常简单,您需要做的是通过将$element注入到控制器中,然后在其上调用.controller()函数来访问元素。

angular
   .module('directives.selectBox', [])
   .directive('selectBox', selectBox);

function selectBox() {
    return {
      restrict   : 'E',
      require    : 'ngModel',
      scope      : {
         list     : '=',
      },
      replace     : true,
      templateUrl : 'common/directives/selectBox/selectBox.html',
      controller :  SelectBoxController,
    };
}
function SelectBoxController($element) {
   var ngModel = $element.controller('ngModel');
   ngModel.$setViewValue(10); // ???
}


Angular 1.5更新

请注意,在AngularJS 1.5中,除了现有的component()函数之外,还添加了新的directive()函数。此函数将configuratoin对象作为第二个参数,该参数允许您直接指定所需的控制器,然后将其绑定到组件的控制器。

再次在同一示例下,但作为组件。

angular
   .module('directives.selectBox', [])
   .component('selectBox',
        {
            controller: SelectBoxController,
            controllerAs: 'vm',
            templateUrl : 'common/directives/selectBox/selectBox.html',
            bindings: {
                list: '=' // though '<' would be better
            },
            require: {
                ngModel: '='
            },
            // replace: true ==> No longer possible with component
        }
    );

function SelectBoxController($element) {

    $onInit() {
        // This function is called automatically whenever the controller is ready
        this.ngModel.$setViewValue(10); // ???
    }
}


我希望我可以输入正确的代码,这个很小的textarea几乎不是IDE的:)

10-04 16:56