Question

我是AngularJS的新手。任何人都可以通过示例告诉我如何在另一个控制器的作用域函数中调用自定义指令。

例如，我有一个具有如下功能的控制器：

angularApp.controller('sample_Ctrl', function ($scope, $http, $timeout, $rootScope, $location) {
     $scope.showReport = function(id) {
     };
});

我创建了一个customDirective，如下所示：

var showModalDirective = function ($timeout) {
    return {
        restrict: 'E',
        templateUrl: '/Partials/template1.html',
    };
};
angularApp.directive('showModal', showModalDirective);

那么如何在showReport函数中调用此指令，以及如何将id传递给模板URL？

Answer 1

您无法在directive中致电controller。它应该是service。

或者您可以在视图中使用指令：

<强>指令：

var showModalDirective = function ($timeout) {
    return {
        restrict: 'E',
        scope: {
           modalId: '='
        },
        templateUrl: '/Partials/template1.html',
    };
};

angularApp.directive('showModal', showModalDirective);

<强>控制器：

angularApp.controller('sample_Ctrl', function ($scope, $http, $timeout, $rootScope, $location) {

  $scope.showModal = false;

  $scope.showReport = function(id) {
    $scope.showModal = true;
    $scope.modalId = id;
  };
});

查看：

<div ng-if="showModal"> <show-modal modal-id="modalId"></show-modal> </div>
当showModal变量为showModal时，会调用
true指令。

Answer 2

要首先使用您的指令，您需要创建与您的指令同名的HTML元素，然后从您的控制器提供该指令的数据。假设你的html页面中有一个div。

<div show-modal>  </div>

然后在这个页面上你的template1.html将通过指令内部调用，并假设在template1.html中有一些html元素

code in your controller -
angularApp.controller('sample_Ctrl',function() {
     $scope.firstName= "My First Name"
})

如何在另一个控制器的作用域函数中调用自定义指令

2 个答案: