如何访问两者都需要:'ngModel'和指令上的控制器属性

问题描述 投票:1回答:2

我想在一个指令上定义控制器和require。像这样的东西:

return {
    controller: 'ValidateElementCtrl as validate',
    require: 'ngModel',
    scope: {
        ngModel: '='
    },
    link: link
};

现在,当在链接函数中定义控制器或需要ng模型时,您只能访问第四个参数。我知道第四个参数可以是一个对象并包含多个控制器等,但是当你将控制器定义为一个数组时就是如此。

这就是我所拥有的,我不知道如何访问控制器,我得到了所需的ngModel作为第四个参数:

function link(scope, element, attrs, ctrlGetsNgModel) {
    console.log(ctrlGetsNgModel) // Returns the ngModel, no sign on the controller
}

我知道我可以在指令上定义一个控制器,并将其作为范围属性传递,但在这种情况下,我想为指令定义一个控制器,它将处理验证和类似,并且该控制器将仅分配给这个指令。

编辑:找到一种方法如何执行此操作:要在链接功能中同时使用ngModel和控制器,您可以将控制器分配给模板,如下所示:

然后定义对someDirectiveName的范围访问:'=',并且可以访问指令范围`scope.someDirectiveName'= <控制器范围的控制器。

javascript angularjs controller directive angular-ngmodel
2个回答
1
投票

不完全确定你想要实现什么,但我认为你不能把'controller as'放在一个像指令定义那样的字符串中。使用controllerAs属性,如下所示:

return {
    // ...
    controller: controller,
    controllerAs: 'validate'
    // ....
};

如果要访问隔离范围上定义的任何属性,还可以使用bindToController: true。但我不确定你是否需要一个隔离范围..

你能澄清一下你的实际目标是什么吗?这是你的目标???

DEMO

HTML

<body ng-controller="MainCtrl">
    <foo ng-model="someModel"></foo>
</body>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  // the element on which you apply the directive will need to have a model
  // defined if you use `require: 'ngModel'`
  $scope.someModel = {modelValue: 'blah'};
});


app.directive('foo', function(){
  return {
    controller: controller,
    controllerAs: 'validate',
    template: '<div>{{validate.someProp}}</div>',
    require: 'ngModel',

    link: link

  };

  function controller(){ 
    this.someProp = 'bar';
  }

  function link(scope, element, attrs, ctrlGetsNgModel) {
      console.log('ctrlGetsNgModel',ctrlGetsNgModel) // Returns the ngModel, no sign on the controller
  }

});

0
投票

假设您的指令名称是“validateField”,那么您可以传递这样的数组:

return {
    controller: controller,
    controllerAs: 'validate',
    require: ['ngModel', 'validateField'],
    scope: {
        ngModel: '='
    },
    link: link
};

然后在link函数中,第四个参数将是一个包含ngModel控制器和指令控制器的数组。

function link(scope, element, attrs, ctrlArray) {
    console.log(ctrlArray[0]) // Returns the ngModel controller
    console.log(ctrlArray[1]) // Returns your controller
}
© www.soinside.com 2019 - 2024. All rights reserved.