Angularjs 您应该如何从其他模块访问控制器功能

我很难理解模块在Angularjs中应该如何相互交互。我想将应用程序分解成一些漂亮的小模块，但我似乎找不到让这些模块相互交互的正确方法

JSFiddle：

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

在面包屑控制器部分之外有一个列表，其操作应添加面包屑。但是，我不了解访问此addcrump函数的正确方法。只有从标记中的breadcrumbcontroller部分内部调用它，我才能使它工作

标记：

<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);
        }


    }]);

})();

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>

---

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

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

---

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

结果如下。希望有帮助

代码如下：

<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);
        }


    }]);

})();

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>

这里是新控制器的链接部分：

<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);
        }


    }]);

})();

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>

加些面包屑

并删除addCrumb调用的前缀'BreadCrumbsCtrl'，因为它们在$scope上。因此，如果我在页面上添加其他模块，这是否意味着我将把所有控制器移到父div上？我开始觉得我所有的小模块都应该是一个大模块，不一定。不过，在您的实例中，您正在创建和显示面包屑，因此从逻辑上讲，它们都由某种面包屑控制器处理是有意义的。模块化方法在Angular上非常有效，所以绝对不要把所有东西都变成一个大模块。我可能没有我希望的那么清楚，但上面的面包屑代码就是一个例子。我试图更好地理解这些较小的模块是如何相互作用的。我试图避免移动ng-controller内的所有内容。谢谢，这似乎更符合我的要求。目前我的时间已经被拖到了别处，但我很快就会回到这里。很高兴我能提供帮助——如果有什么不清楚的话，大声说出来。斯特凡，我注意到了一个问题。调用“selectcrump”时，crumps数组会更新，但屏幕不会更新。我仍然看到前面的列表。我是否必须以某种方式应用此数据更改？是的，我的错。因此，在更新值时，视图仍在引用旧的未许可数组。我通过在服务中添加一个getter修复了这个问题。通过这种方式，视图将获得当前位于crumps值中的内容的引用，即使它是自上一个$digest循环以来被替换的。从技术上讲，您可以放弃该服务，直接将add和select函数放置在控制器中，但我相信将其封装在服务中是最佳做法。这样，当您需要从另一个地方（控制器/服务/等等）添加面包屑时，您只需注入BreadCrumbsService就可以了。