Question

(function () {
    'use strict';

    angular
        .module('app')
        .directive('documentList', documentList);

    documentList.$inject = ['$window'];

    function documentList($window) {
        var directive = {
            restrict: 'E',
            controller: controller,
            controllerAs: "dl",
            templateUrl: 'directives/document/document-list.html',
            transclude: false,
            scope: {
                productRef: "=",
                productSerialNumber: "=",
                title: "@",
                eid: "@"
            },
        };
        return directive;

        function controller($scope, $state, $element, documentService, ngProgressFactory, registrationService) {

            var self = this;
                self.goToDetailPage=goToDetailPage;
               function goToDetailPage(docId) {

                   return "a";
                }


})();


(function() {
    'use strict';

    angular
        .module('app')
        .controller('DetailCtrl', detailCtrl);

    // Implementation of controller 
    detailCtrl.$inject = ['$scope', '$state', '$stateParams', '$rootScope'];

    function detailCtrl($scope, $state, $stateParams, $rootScope) {
       var self=this; 
       //alert($stateParams.docId)
       self.a=$scope.dl.goToDetailPage();
    }

})();

上面是我的指令中的代码，我有一个控制器，我想调用goToDetailPage函数。但是当我试图通过var a=$scope.goToDetailPage()访问它时，我在控制台中收到错误。无法纠正。任何帮助表示赞赏！感谢

 //DetailPage
        .state('app.sr.detail', {
            name: 'detail',
            url: '/detail',
            templateUrl: 'views/detail/detail1.html',
            controller: 'DetailCtrl',
            controllerAs: 'vm'
        })

Answer 1

当您希望能够调用位于指令中但仍需要能够从控制器调用的函数时，可以使用的酷模式是使用双向绑定传入对象，然后扩展该对象使用指令内的函数。在您的指令中传递一个附加值：

scope: {
    productRef: "=",
    productSerialNumber: "=",
    title: "@",
    eid: "@",
    control: '=', // note that this is passed in using two way binding
}

然后通过附加一个函数将该对象扩展到指令的控制器中：

// this is in your directive's controller
$scope.control.goToDetailPage = function() {
    // function logic
}

现在在Controller中定义control对象并将其传递给指令。因为它是双向绑定的，所以将应用该函数并可在任一范围内调用。

// in your controller, assuming controller as syntax
var vm = this;
vm.control = {};

// somewhere later you can invoke it
vm.control.goToDetailPage();

Answer 2

也许试试，

$scope.goToDetailPage = function (docId) {
      return "a";
}

或者，要使用“控制器为”语法，

var a = dl.goToDetailPage();

Answer 3

从片段看起来，DetailCtrl是documentList指令的父级。子范围中的函数不能从父控制器访问。考虑在goToDetailPage中定义DetailCtrl并使用'&'将其注入指令的范围

修改如果您有这样的事情：

<div ng-controller="DetailCtrl"> <document-list ...></document-list> </div>

然后控制器DetailCtrl的范围是父范围，documentList指令是子范围。由于您使用documentList在scope: {...}指令中定义隔离范围，因此父级和子级范围不同。并且可以使用$scope.methodName()在父作用域中直接访问隔离范围中定义的方法。

然而，您可以采取相反的方式，即在DetailCtrl中定义方法并使用以下方法注入指令的范围：

<div ng-controller="DetailCtrl"> <document-list .... detail-page="goToDetailPage()"></document-list> </div>

并将指令的范围更改为：

scope: { ..., detailPage:'&' },

现在，您可以通过调用detailPage()
来调用指令控制器中的函数
请参阅Angular Guide

希望有所帮助

无法将指令中定义的函数调用到我的控制器中

3 个答案: