如何在现有模块中包含角度模块？答案

【问题标题】：How can I include an angular module in an existing module?如何在现有模块中包含角度模块？
【发布时间】：2018-05-17 12:06:29
【问题描述】：

所以我在 Umbraco 7 中定义了一个自定义部分：

namespace NZ_Realty_Ltd.CRM
{
    [Application("crm", "CRM", "trayuser", 8)]
    public class CrmSection : IApplication { }
}

它出现了，不用担心。但它需要一个视图和控制器。所以我开始使用控制器：

angular.module("umbraco").controller("CrmController",
    function ($scope, $http) {
        $http.get('backoffice/crm/ContactApi/GetAll').success(function (data) {
            $scope.contacts = data;
        });
    });

同样，没问题。我的数据正在从 C# CRUD api 中读取并被发送回视图。但我想对这些结果进行分页。所以我正在尝试使用这个自定义指令来做到这一点：https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

这是我的 html 视图：

<div ng-controller="CrmController">

    <umb-pane>
        <p>Page {{currentPage}} / {{totalPages}}</p>
        <p>Showing {{pageSize}} items per page:</p>

        <ul class="contacts">
            <li dir-paginate="contact in contacts | itemsPerPage: 10">
                <span>{{contact.name}}</span>
                <p>{{contact.bio}}</p>
            </li>
        </ul>
        <dir-pagination-controls></dir-pagination-controls>
    </umb-pane>

</div>

问题是这些表达式都没有出现（它们都是空白的）。我错过了如何包含分页模块的步骤。实际上我已经坚持了几个小时。我已经尝试了所有方法：

angular.module("umbraco", ['angularUtils.directives.dirPagination']).controller("CrmController",
    function ($scope, $http) {
        $http.get('backoffice/crm/ContactApi/GetAll').success(function (data) {
            $scope.contacts = data;
        });
    });

... 仅包含来自<script> 标记的指令javascript 文件。但我真的不知道我在做什么，也不太了解模块语法（我已经多次阅读分页演示，但它似乎与使用 umbraco angularjs 应用程序有很大不同）。我在文档中看到包含第二个参数意味着您正在制作一个新模块。但是第二个参数[]里面的信息有什么相关性呢？为什么我要创建一个新模块？我不能只包含现有指令吗？

编辑：这是我认为最接近应该工作的方法。但是我没有列出任何联系人，也没有显示分页控件。我的想法是加载分页模块（因此是指令），然后像往常一样创建我的控制器以避免冲突和加载顺序的东西，但也在控制器中添加默认值，如下例所示：http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

angular.module("angularUtils.directives.dirPagination");
angular.module("umbraco").controller("CrmController",
    function ($scope, $http) {
        $http.get('backoffice/crm/ContactApi/GetAll').success(function (data) {
            $scope.contacts = data;
            $scope.currentPage = 1;
            $scope.pageSize = 10;
        });
    });

【问题讨论】：

您确定要加载 dirPagination.js 文件吗？ assetsService.loadJs("/App_Plugins/PaginationEditor/Js/dirPagination.js", $scope }).then(function(){ //this code executes when the script is done loading });您可以在这里找到更多信息：umbraco.github.io/Belle/#/api/umbraco.services.assetsService
是的，我把它放在 package.manifest 中，然后我确认 umbraco 在 html 页面上以正确的顺序加载它（实际上是在单个 js 文件中预加载所有脚本）。

标签： angularjs angularjs-directive pagination umbraco7

【解决方案1】：

您可以在控制器启动之前添加它：

app.requires.push('angularUtils.directives.dirPagination');

【讨论】：