javascript - 将父 'vm' 对象传递给自定义指令而不是方法(&)和模型(=)绑定(bind) Angular

Question

有人可以帮我理解这一点吗？

我在 Controller 中包含一个自定义指令，并且我想在多个页面中使用相同的指令。指令模板包含按钮，其相应的操作将在包含该指令的 Controller 中处理。

Controller
------------------------------------------------------------------------
angular
    .module('test')
    .component('approval', {
      template: '<data-table scopeObj ="vm"></data-table>',
      controller: 'PendingApprovalsController',
      controllerAs: 'vm'
    })
    .controller('approvalController', approvalController);

  approvalController.$inject = ['$scope'];
  /* @ngInject */
  function approvalController($scope) {

    var vm = this;


    vm.search1 = function(val) {
       console.log("search1::", val);
     };

     vm.search2 = function(val) {
       console.log("search2::", val);
     };
    vm.search3 = function(val) {
       console.log("search3::", val);
     };
    vm.search4 = function(val) {
       console.log("search4::", val);
     };
    vm.search5 = function(val) {
       console.log("search5::", val);
     };

  }

Directive
---------------------------------------------------------------------
angular.module('test')
    .directive('dataTable', dataTable)
    .controller('dataTableController', dataTableController);

function dataTable( ) {
    return {
      scope: {
        scopeObj: '='
      },
      controller: 'dataTableController',
      controllerAs: 'vm',
      template: '<button class="btn-default" ng-click="scopeObj.search1('search1')">Button1</button> <button class="btn-default" ng-click="scopeObj.search2('search2')">Button2</button>+
        <button class="btn-default" ng-click="scopeObj.search3('search3')">Button3</button><button class="btn-default" ng-click="scopeObj.search4('search4')">Button4</button>'
    };
  }


  dataTableController.$inject = ['$scope'];
  function dataTableController($scope) {

    var vm = this;

  }

1.我可以将指令范围设置为 false 并在多个页面中重复使用该指令吗？

2.我可以将 Controller “VM”对象传递给指令，而不是传递单个方法，例如

<data-table method1="vm.search1(val)" method2="vm.search2(val)" method3 ="vm.search3(val)" method4="vm.search1(val)"></data-table>

并在指令内访问它们

范围:{ 方法1:“&”，方法2:“&”，方法3:“&”，方法4:“&” }

因为我有太多方法需要处理。

Answer 1

是的，这绝对是您可以做的事情，但是您需要进行以下更改才能使其正常工作:

• 请勿使用dataTable作为您的指令名称。 data不允许作为指令名称，因为 AngularJS 将删除 data从它找到的每个指令中。 data是使用属性时的保留关键字。试试statTable反而。
• 使用<绑定(bind)scopeObj因为您只需要单向绑定(bind)来解决此问题。
• 设置bindToController等于 true在statTable这样我们就可以到达scopeObj的方法使用 controllerAs句法。
• 在您的模板中，请确保使用 scope-obj作为属性名称。请记住，该属性在范围中以驼峰命名法引用，但在模板中以短横线命名(类似于定义指令)。
• 在 statTable模板，调用vm.scopeObj.method()与 scopeObj.method() 相反直接，因为您的 scopeObj是 vm 的属性(property)(因为我们在这里使用 controllerAs 语法)。

把它们放在一起，你就会得到你想要的效果。查看下面的代码以及建议的更改:

angular.module('test', [])
  .directive('statTable', statTable)
  .controller('statTableController', statTableController)
  .directive('testDirective', testDirective)
  .controller('testDirectiveController', testDirectiveController);

function statTable() {
    return {
    scope: {
        scopeObj: "<"
    },
    bindToController: true,
    controller: "statTableController",
    controllerAs: "vm",
    template: "<button class='btn-default' ng-click='vm.scopeObj.search1(\"search1\")'>Button1</button> <button class=\"btn-default\" ng-click=\"vm.scopeObj.search2('search2')\">Button2</button> <button class=\"btn-default\" ng-click=\"vm.scopeObj.search3('search3')\">Button3</button>"
  };
}

function statTableController() {
  var vm = this;
  vm.log = console.log;
}

function testDirective() {
    return {
    controller: "testDirectiveController",
    controllerAs: "vm",
    template: "<stat-table scope-obj='::vm'></stat-table>"
  }
}

function testDirectiveController() {
  var vm = this;

  vm.search1 = function(val) {
        console.log("search1::", val);
  };

  vm.search2 = function(val) {
    console.log("search2::", val);
  };

  vm.search3 = function(val) {
    console.log("search3::", val);
  };
}

点击here对于一个工作的 JSFiddle。单击按钮会产生所需的效果。