如何将NgModelController传递给指令控制器? [英] How to pass NgModelController to directive controller?

问题描述

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

Can i pass NgModelController to directive controller? That's required so i can assign values to model in 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(ngModel) {
       ngModel.$setViewValue(10); // ???
    }

推荐答案

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

Pretty simple actually, what you need to do is to get access to the element by injecting $element into your controller and then calling the .controller() function on it.

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中，除了现有的directive()函数之外，还添加了新的component()函数.此函数将configuratoin对象作为第二个参数，该参数使您可以直接指定所需的控制器，然后将其绑定到组件的控制器.

Angular 1.5 update

Note that in AngularJS 1.5 the new component() function was added in addition to the existing directive() function. This function takes a configuratoin object as second parameter that allows you to directly specify the required controllers, which will then be bound to the component's controller.

再次在同一示例下面，但作为组件.

Below the same example again, but as component.

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的:)

I hope I typed it out ok, this tiny textarea is hardly an IDE :)

这篇关于如何将NgModelController传递给指令控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！