Question

所以我有一个指令，将在我的应用程序中充当侧面板。当用户单击按钮时，侧面板将打开。在所述侧面板中，我需要控制器和该区域的视图基于用户点击的按钮是动态的。我找到了一种动态加载模板的方法，但我遇到了动态加载控制器的问题。

在这里谈论足够的代码。

指令代码

app.directive('itemForm', function($compile) {
  var item1Template = '<div ng-include="view"></div>';
  var item2Template = '<h1> Hello item2 Form </h1>';
  var getTemplate = function(contentType) {
    if(contentType === 'item1') {
      return item1Template;
    } else if(contentType === 'item2') {
      return item2Template;
    }
  };
  return {
    restrict: 'E',
    replace: 'true',
    scope: {
      formType: '@formType'
    },
    //templateUrl: scope.template,
    link: function(scope, element) {
      if(scope.formType === 'item1') {
        scope.view = '/views/item1.html';
      }
      element.html(getTemplate(scope.formType)).show();
      $compile(element.contents())(scope);
    }
  };
});

HTML

<item-form form-type='{{form.type}}'> </item-form>

用于查看指令的控制器

$scope.form = {};
$scope.openItemOneDlg = function() {
    $scope.isFormOpen = !$scope.isFormOpen;  // this opens the side panel
    $scope.form.type = 'item1'; 
 };
$scope.openItemTwoDlg = function() {
    $scope.isFormOpen = !$scope.isFormOpen;  // this opens the side panel
    $scope.form.type = 'item2'; 
 };

Answer 1

您可以点击按钮广播（使用$ broadcast）一个事件。并在指令中有一个监听器（使用$ on）。这样，无论何时触发事件，都将执行指令逻辑。

您可以参考此链接上的答案，了解$ broadcast和$ on：

的用法

On-and-broadcast-in-AngularJS

如何将控制器动态加载到指令

指令代码

HTML

用于查看指令的控制器

1 个答案: