將動態控制器傳遞給角度指令

Question

我熟悉控制器和名稱的語法，但是我試圖創建一個通用指令，該指令將獲取項目列表，並且需要為每個項目指定一個控制器。

這是我的主要指令：

function controlPanel() {
    var directive = {
        restrict: 'E',
        replace: true,
        scope: {
            controlPanelItems: "=sbControlPanelItems"  
        },
        templateUrl: 'control-panel.html',
        link: link
    };
    return directive;

    function link(scope, element) {
    }

}

這是指令模板：

<sb-control-panel-item ng-repeat="controlPanelItem in controlPanelItems"
                                         sb-title="controlPanelItem.title"
                                         sb-template-url="controlPanelItem.templateUrl"
                                         sb-control-panel-item-controller="controlPanelItem.controller"></sb-control-panel-item>

我的問題是sb-control-panel-item-controller屬性。

當我傳遞變量時，Angular會引發異常，當我傳遞簡單字符串（控制器的名稱）時，它的工作效果很好。

這是control-panel-item指令的代碼：

function controlPanelItem() {
    var directive = {
        restrict: 'E',
        replace: true,
        scope: {
            title: '=sbTitle',
            templateUrl: '=sbTemplateUrl'
        },
        templateUrl: 'control_panel_item.html',
        controller: '@',
        name: 'sbControlPanelItemController',
        link: link
    };
    return directive;

    function link(scope, iElement, iAttributes, controller) {

    }

}

也許有一種方法可以通過鏈接功能注入控制器，然后將其通過示波器？

Answer 1

您可以使用$ controller服務在指令內動態實例化任何控制器，請檢查此plunkr 。 請記住，如果要立即靜態指定控制器，則需要將其用單引號引起來。

基本上，代碼是這樣的：

function MainCtrl() {
  this.firstCtrl = 'FirstCtrl';
  this.secondCtrl = 'SecondCtrl';
}


function FirstCtrl() {
  this.name = 'First Controller';
}

function SecondCtrl() {
  this.name = 'Second Controller';
}


function fooDirective() {
  return {
    scope: {
      ctrl: '='
    },
    template: '<div>{{foo.name}}</div>',
    controller: ['$controller', '$scope', function($controller, $scope) {
      var foo = $controller($scope.ctrl, {$scope: $scope});
      return foo;
    }],
    controllerAs: 'foo',
    link: function ($scope, $element, $attrs, $ctrl) {
      console.log($scope.ctrl);
    }
  };
}

angular
  .module('app', [])
  .directive('fooDirective', fooDirective)
  .controller('MainCtrl', MainCtrl)
  .controller('FirstCtrl', FirstCtrl)
  .controller('SecondCtrl', SecondCtrl);

這就是HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="MainCtrl as main">
    <h1>
      Test
    </h1>

    <foo-directive ctrl="main.firstCtrl">
      "name: " {{foo.name}}
    </foo-directive>


    <foo-directive ctrl="main.secondCtrl">
      {{foo.name}}
    </foo-directive>
  </body>

</html>

================================================== ====================== 錯誤的舊答案

在此博客條目中似乎是一個未記錄的屬性，可讓您完全執行所需的操作。

function FirstCtrl() {
  this.name = 'First Controller';
}

function SecondCtrl() {
  this.name = 'Second Controller';
}

function fooDirective() {
  return {
    scope: {},
    name: 'ctrl',
    controller: '@',
    controllerAs: 'foo',
    template: '<div></div>',
    link: function ($scope, $element, $attrs, $ctrl) {

    }
  };
}

angular
  .module('app', [])
  .directive('fooDirective', fooDirective)
  .controller('FirstCtrl', FirstCtrl)
  .controller('SecondCtrl', SecondCtrl);

因此，您在指令中需要做的就是添加一個屬性名稱，該名稱鏈接到將與控制器名稱一起使用的屬性。

<foo-directive ctrl="FirstCtrl"></foo-directive>
<foo-directive ctrl="SecondCtrl"></foo-directive>

如果您的指令（根據您的問題）需要來自屬性而不是字符串，請使用{{}}表示法：

<sb-control-panel-item ng-repeat="controlPanelItem in controlPanelItems"
                                         sb-title="controlPanelItem.title"
                                         sb-template-url="controlPanelItem.templateUrl"
                                         sb-control-panel-item-controller="{{controlPanelItem.controller}}"></sb-control-panel-item>

將動態控制器傳遞給角度指令

問題描述

1 個解決方案

解決方案1
4 已采納 2016-10-28 08:52:11

將動態控制器傳遞給角度指令

問題描述

1 個解決方案

解決方案1 4 已采納 2016-10-28 08:52:11

解決方案1
4 已采納 2016-10-28 08:52:11