Question

我目前正在使用角度构建我的第一个APP，我发现自己有点迷失，会对以下主题的任何帮助表示感谢。

我有一个带有两个面板的单页应用程序。左侧面板显示项目列表（比如说新闻），右侧面板显示任何可用新闻的详细信息。我希望能够点击左侧面板上列出的任何项目，并阅读右侧面板上的详细信息。

此模型的示例HTML / JS代码将如下所示（此代码不会按原样运行）：

HTML：

<div id="leftPanel">
    <news-list></news-list>
</div>
<div id="rightPanel">
    <news-detail></news-detail>
</div>

的Javascript /角：

var app = angular.module('app', []);

app.directive('newsList', function () {
    return{
        restrict: 'E',
        templateUrl: 'templates/news-list.html',
        controller: function ($show) {
            $scope.clickAction(item){
                data = ....some JSON http request...
                showDetail(data);
            }
        },
        controllerAs: 'listing'
    };
});

app.directive('newsDetail', function () {
    return{
        restrict: 'E',
        templateUrl: 'templates/news-detail.html',
        controller: function ($scope) {
            $scope.showDetail(data){
                ....
            }
        },
        controllerAs: 'detail'
    };
});

如您所见，必须从上面的newsList指令控制器调用newsDetail中的showDetail（）函数。点击操作事件是从新闻列表模板中的不同元素调用的。

问题是：¿如何在指令内部从另一个控制器调用控制器内的函数？

由于

Answer 1

在newsList和newsDetail的父元素中声明控制器可能更好。这是我的建议：

var app = angular.module('app', []);

app.directive('newsList', function () {
    return{
        restrict: 'E',
        templateUrl: 'templates/news-list.html',
        controller: function ($show) {
            $scope.clickAction(item){
                data = ....some JSON http request...
                $scope.showDetail(data);
            }
        },
        controllerAs: 'listing'
    };
});

app.directive('newsDetail', function () {
    return{
        restrict: 'E',
        templateUrl: 'templates/news-detail.html',
        controllerAs: 'detail'
    };
});
app.controller('newsCtrl', function($scope){
    $scope.showDetail = function(data){
        ....
    };
});

将指令嵌套在使用ngController指令的父元素中：

<div ng-controller="newsCtrl">
    <div id="leftPanel">
        <news-list></news-list>
    </div>
    <div id="rightPanel">
        <news-detail></news-detail>
    </div>
</div>

Answer 2

如何尝试在指令中添加您想要关联的指令，如下所示：

var app = angular.module('app', []);

app.directive('newsList', function () {
    return{
        required: 'newsDetail', 
        restrict: 'E',
        templateUrl: 'templates/news-list.html',
        controller: function ($show) {
            $scope.clickAction(item){
                data = ....some JSON http request...
                detail.showDetail(data);
            }
        },
        controllerAs: 'listing'
    };
});

app.directive('newsDetail', function () {
    return{
        restrict: 'E',
        templateUrl: 'templates/news-detail.html',
        controller: function ($scope) {
            $scope.showDetail(data){
                ....
            }
        },
        controllerAs: 'detail'
    };
});

在指令之间调用函数

2 个答案: