Question

我很难理解模块在Angularjs中应该如何相互作用。我想将应用程序分解为很好的小模块，但我似乎无法找到使这些模块相互交互的正确方法。

的jsfiddle： http://jsfiddle.net/jwest80/o5o3sr8q/4/

代码显示了我想要在页面顶部的面包屑。 BreadCrumb在其自己的模块“面包”中，并包含在父模块“ngFSCH”中。

BreadCrumb控制器部分之外有一个列表，其操作应添加面包屑。但是，我不明白访问此addCrumb函数的正确方法。如果从标记中的痕迹导致控制器部分调用它，我只能使它工作。

标记：

<div ng-app="ngFSCH">

    <section ng-controller="BreadCrumbsCtrl">
        <span ng-repeat="crumb in crumbs" class="breadcrumbs">
            <span ng-hide="isLast($index)" ng-click="selectCrumb($index)"><a href="#">{{crumb.text}}</a> > </span>
            <span ng-show="isLast($index)">{{crumb.text}}</span>
        </span>
    </section>


    <section>
        <h4>Add Some Crumbs</h4>
        <ul>
            <li><a href="#" ng-click="BreadCrumbsCtrl.addCrumb('Company')">Company</a></li>
            <li><a href="#" ng-click="BreadCrumbsCtrl.addCrumb('Department')">Department</a></li>
            <li><a href="#" ng-click="BreadCrumbsCtrl.addCrumb('User')">User</a></li>
        </ul>
    </section>

</div>

脚本：

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

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

    app.controller('BreadCrumbsCtrl', ['$scope', '$log', function ($scope, $log) {

        $scope.crumbs = [{ text: "Crumb 1", url: "url1" }, { text: "Crumb 2", url: "url2" }];

        $scope.isLast = function(index) {
            return index === $scope.crumbs.length-1;
        }

        $scope.addCrumb = function (newCrumb) {
            $scope.crumbs.push({ text: newCrumb, url: "TestURL" });
        }

        $scope.selectCrumb = function (index) {
            $log.info($scope.crumbs[index].url);
            $scope.crumbs = $scope.crumbs.slice(0, index + 1);
        }


    }]);

})();

Answer 1

这是因为您在控制器范围内工作。如何将ng-controller指令移动到ng-app所在的包含div？

<div ng-app="ngFSCH" ng-controller="BreadCrumbsCtrl">

Answer 2

我会将面包屑功能封装在一个服务中，并为带有链接的部分创建一个控制器（添加面包屑）。然后，新控制器可以使用该服务添加和删除阵列中的碎屑。您还可以将crumbs数组添加到值中。然后，您的控制器可以将添加和选择功能公开给他们控制的html的微小部分，而不会污染页面的其他部分。

结果如下。希望它有所帮助！

JSFiddle

以下是代码：

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

app.value('crumbs',  [
    { text: "Crumb 1", url: "url1" }, 
    { text: "Crumb 2", url: "url2" }
]);

app.factory("BreadCrumbsService", ['$log', 'crumbs', function ($log, crumbs) {
    var service = {
        getCrumbs: getCrumbs,
        addCrumb: addCrumb,
        selectCrumb: selectCrumb
    };
    return service;

    //I did not add a set crumbs because you can set it directly.
    function getCrumbs(){
        return crumbs;
    } 

    function addCrumb(newCrumb) {
        crumbs.push({
            text: newCrumb,
            url: "TestURL"
        });
    }

    function selectCrumb(index) {
        $log.info(crumbs[index].url);
        crumbs = crumbs.slice(0, index + 1);
    }        
}]);

app.controller('BreadCrumbsCtrl', ['$scope', 'BreadCrumbsService', function ($scope, BreadCrumbsService){
    $scope.crumbs = BreadCrumbsService.getCrumbs;
    $scope.selectCrumb = BreadCrumbsService.selectCrumb;
    $scope.isLast = function (index) {
        return index === BreadCrumbsService.getCrumbs().length - 1;
    }
}]);


app.controller('AddLinksCtrl', ['$scope', 'BreadCrumbsService', function ($scope, BreadCrumbsService) {
    $scope.addCrumb = BreadCrumbsService.addCrumb;
}]);

以下是带有新控制器的链接部分：

 <section ng-controller="AddLinksCtrl">
        <h4>Add Some Crumbs</h4>
        <ul>
            <li><a href="#" ng-click="addCrumb('Company')">Company</a></li>
            <li><a href="#" ng-click="addCrumb('Department')">Department</a></li>
            <li><a href="#" ng-click="addCrumb('User')">User</a></li>
        </ul>
    </section>

如何从其他模块访问控制器功能

2 个答案: