Question

我是AngularJs的新手。我正在使用创建和编辑操作的部分视图，但面临一些问题，需要检索数据。

正在从我的MVC控制器成功检索数据，但无法填充视图。

这是我正在使用的JS

 (function (angular) {
    'use strict';
    angular.module('Sub_Ledger_Category_Create_app', [])
.controller('Sub_Ledger_Category_Create_ctrl', function ($scope, $http, $location) {

    $scope.SubLedgerCategoryModel = {};
    GetRequestType();

    function GetRequestType() {
        $http.get('/Common/Get_Action_Request')
        .success(function (result) {
            //debugger;
            // $scope.SubLedgerCategoryModel = data;

            if (result == "Create") {
                $("#txt_Master_Subledger_Category").html("<h3  class='box-title'> Create Sub Ledger Category </h3>");
                // $("#txt_Master_Accounting_Group_Group_id").val(0);

            }
            else {
                $("#txt_Master_Subledger_Category").html("<h3  class='box-title'> Edit Sub Ledger Category</h3>");
                //GetEditData();
                $scope.GetEditData();
            }
            $("#Master_Subledger_Category").val(result)

            NProgress.done();
        })
        .error(function (data, status, headers, config) {
            NProgress.done();
            $("div.failure").text("Unable to retrieve Request Type");
            $("div.failure").fadeIn(300).delay(1500).fadeOut(400);
        });
    };

     $scope.GetEditData = function () {
        $http.get('/Master_Subledger_Category/GetEditData')
        .success(function (data, status, headers, config) {
            debugger;
             $scope.SubLedgerCategoryModel = data;

            console.log(data);
        })
        .error(function (data, status, headers, config) {
            NProgress.done();
             $("div.failure").text("Retrive Failure");
             $("div.failure").fadeIn(300).delay(1500).fadeOut(400);
        });
    };


    $scope.InsertSubledgerCategory = function () {
        NProgress.start();
        var Request_Type = $("#Master_Subledger_Category").val();

        var Url_Master_Subledger;
        if (Request_Type == "Create") {
            Url_Master_Subledger = "/Master_Subledger_Category/Create_Master_Subledger_Category_Ajax";
        }
        else {
            Url_Master_Subledger = "/Master_Subledger_Category/Test";
        }

        $http({
            method: 'POST',
            url: Url_Master_Subledger,
            data: $scope.SubLedgerCategoryModel
        }).success(function (data, status, headers, config) {
            if (data.success === true) {
                NProgress.done();
                $("div.success").text("Successfully Created");
                $("div.success").fadeIn(300).delay(1500).fadeOut(800);
                $scope.SubLedgerCategoryModel = {};
                console.log(data);
            }
            else {
                NProgress.done();
                $("div.failure").text("Saveing Failure");
                $("div.failure").fadeIn(300).delay(1500).fadeOut(400);
            }
        }).error(function (data, status, headers, config) {
            NProgress.done();
            $("div.failure").text("Saveing Failure");
            $("div.failure").fadeIn(300).delay(1500).fadeOut(400);
            console.log($scope.message);
        });

    };


})
    .config(function ($locationProvider, $sceProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
        $sceProvider.enabled(false);

    });
})(angular);

这是HTML：

<div class="form-horizontal" ng-app="Sub_Ledger_Category_Create_app">
            <div class="box-body" ng-controller="Sub_Ledger_Category_Create_ctrl">
                <div class="form-group">
                    <label for="txt_Master_Subledger_Category_Name" class="col-sm-2 control-label">Sub Ledger Category</label>
                    <div class="col-sm-10">
                        <input class="form-control" ng-model="SubLedgerCategoryModel.Sub_Ledger_Cat_Name" id="txt_Master_Subledger_Category_Name" name="txt_Master_Subledger_Category_Name" autofocus placeholder="Sub Ledger Category">
                        <input ng-model="SubLedgerCategoryModel.Sub_Ledger_Cat_ID" name="txt_Master_Subledger_Category_ID" id="txt_Master_Subledger_Category_ID" hidden />
                    </div>
                </div>



                <!-- /.box-body -->
                <div class="box-footer">
                    <button type="submit" value="Save" ng-click="InsertSubledgerCategory()" class="btn btn-info pull-right">Save</button>

                    <div class="text-red alert-box failure pull-right margin-r-5"></div>

                    <div class="text-green alert-box success pull-right margin-r-5"></div>


                </div>
                <!-- /.box-footer -->
            </div>

        </div>

不幸的是我无法填充视图，但在控制台日志中我可以查看数据，如果有人帮助我的话会很有帮助。

Answer 1

AngularJs默认以这种方式阻止加载HTML。您可能在浏览器控制台上收到错误：尝试在安全的上下文中使用不安全的值。

这是由于Angular的Strict Contextual Escaping（SCE）模式（默认启用）。请查看this以获取更多信息。

要解决此问题，您有两种解决方案：

$ SCE $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize：包含angular-sanitize.min.js资源并在模块中添加依赖项。

Answer 2

我只更改了以下内容

scope.SubLedgerCategoryModel = data;

到

scope.SubLedgerCategoryModel = data [0]：

并解决了我的问题。

使用AngularJs和MVC填充局部视图的问题

2 个答案: