Angular 中继器和第一次尝试使用 Angular答案

【问题标题】：Angular Repeater and First attempt at using AngularAngular 中继器和第一次尝试使用 Angular
【发布时间】：2019-02-06 17:23:12
【问题描述】：

我第一次尝试在 ASP.Net/DotNetNuke MVC 项目中使用 angular。

查看：

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<IEnumerable<IMT.AdvancedProductSearchMVC.Models.SearchTerm>>
@using DotNetNuke.Web.Mvc.Helpers

<script src="/DesktopModules/RazorCart/Core/Content/Scripts/angular.min.js"></script>

<div ng-app="APSApp" class="container">
    <br />
    <br />
    <input type="text" placeholder="Search Terms" ng-model="searchTerms" />
    <br />
    <div ng-controller="apsCtl">
        <table class="table">
            <tr ng-repeat="r in searchTerms">
                <td>{{r.DisplayText}}</td>
                <td><input type="text" ng-model="r.SearchInput"></td>
            </tr>
        </table>
    </div>
</div>

<script src="DesktopModules/MVC/AdvancedProductSearchMVC/Scripts/AdvancedProductSearch.js"></script>

AdvancedProductSearch.js

 aps = angular.module('APSApp', []);
aps.controller('apsCtl',
    function(APSService, Features, $scope, $http) {
        alert("calling factory");
        $scope.searchTerms = [];
        APSService.getAPS(successFunction, failureFunction);

        successFunction = function(data) {
            alert("success");
            $scope.searchTerms = data;
        };

        failureFunction = function(data) {
            alert("failure");
        };
    });

aps.factory('APSService',
    function($http) {
        alert("getting factory");
        return {
            getAPS: function(onSuccess, onFailure) {
                //var APSService = {};
                $http.get('/Desktopmodules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS').success(onSuccess).error(onFailure);
            }
        };
    });

当然，它不起作用。例如，我的控制器永远不会被调用，而且我不知道自己在做什么。如何更正我的代码以使其正常工作？

【问题讨论】：

发布 AdvancedProductSearch.js 的代码
我做到了。那是底部带有角度命令的javascript。
角度命令？
对不起。角度语句。

标签： asp.net angularjs model-view-controller dotnetnuke repeater

【解决方案1】：

您的 AdancedProductSearch.js 具有不同的模块名称，并且您在 HTML 中使用了不同的模块名称。

在你的脚本中重命名模块名并添加一个空的依赖如下

  angular
        .module('APSApp',[])
        .controller('apsCtl', apsCtl)
    ;

【讨论】：

我改变了它。我现在在调试器中遇到错误： SCRIPT5009: SCRIPT5009: 'apsCtl' is not defined，我认为它来自
我已经更新了 AdvancedProductSearch.js。我仍在尝试使用控制器/工厂模型。它仍然无法正常工作。有什么建议吗？
这很有趣。看起来我的控制器或某些东西与另一个角度控制器冲突：错误：[$injector:unpr] errors.angularjs.org/1.3.9/$injector/… at Anonymous function (locallyheard.com.dnndev.kvalley.com/DesktopModules/Mandeeps/…) Mandeeps 是 dotnetnuke 皮肤。
Mandeeps 是一个 dotnetnuke 皮肤。这是什么？ :P

【解决方案2】：

经过数小时阅读 Angular 文档和示例以及大量测试后，它现在可以正常工作了：

我的 AdvancedProductSearch.js

var aps = angular.module("APSApp", []);
aps.config(function($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data) {
        return data !== undefined ? $.param(data) : null;
    };
});

aps.factory('SearchTerms', 
    function($http) {
        return {
            getSearchTerms: function(onSuccess, onFailure) {
                const rvtoken = $("input[name='__RequestVerificationToken']").val();
                $http({
                    method: "post",
                    url: "/DesktopModules/MVC/AdvancedProductSearchMVC/AdvancedProductSearch/GetAPS",
                    headers: {
                        "ModuleId": moduleId,
                        "TabId": tabId,
                        "RequestVerificationToken": rvtoken
                    }
                }).success(onSuccess).error(onFailure);
            }
        };
    });

aps.controller('APSCtl',
    function(SearchTerms, $scope) {
            $scope.searchTerms = [];
            successFunction = function(data) {
                $scope.searchTerms = data;
                console.log($scope.searchTerms);
            };

            failureFunction = function(data) {
                console.log('Error' + data);
            };
            SearchTerms.getSearchTerms(successFunction, failureFunction);
    });

【讨论】：