AngularJS未在视图中显示数据

Question

我坚持在视图中显示 angularjs 数据。

我在角度控制器中得到了正确的数据。但它在 HTML 中没有绑定。

万事皆准。

  <div class="well well-sm well-light">
        <h4 class="txt-color-blue">Assembly Status <a href="javascript:void(0);" class="pull-right"><i class="fa fa-refresh"></i></a></h4>
        <br>
        <div class="custom-scroll table-responsive" style="overflow-y: scroll;">
            <table id="assemblystatustbl" class="table table-bordered">
                <thead>
                    <tr>
                        <th><i class="glyphicon glyphicon-bullhorn"></i>Status Name</th>
                        <th>#Assembly</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="val in Summary">
                        <td>{{ val.Description }}</td>

                        <td>{{ val.AssemblyCount }}</td>
                    </tr>
                </tbody>
            </table>

        </div>

    </div>

第一次效果很好，但是当我通过 ajax 调用视图时遇到了这个问题

(function () {
'use strict';

var controllerId = 'DashBoardController';

// TODO: replace app with your module name
angular.module('CalcQouteModule').controller(controllerId,
   ['$scope', '$modal', '$routeParams', '$http', '$route', '$timeout', 'DashBoardFactory', DashBoardController]);



function DashBoardController($scope, $modal, $routeParams, $http, $route, $timeout, DashBoardFactory) {

    $scope.title = 'DashBoardController';
    $scope.activate = activate;
    $scope.Summary = [];
    activate();

    function activate() {
        DashBoardFactory.getSummary()
            .then(
            function (data) {
                console.log(data.data);
                $scope.Summary = data.data.collection;
                //angular.copy(data.data.collection, $scope.Summary);
            }, function (e) {alert(e.stautsText);});
    }
}

路由配置文件

   .when('/DashBoard', {
             templateUrl: '/DashBoard',
             controller: 'DashBoardController'
         })

加载局部视图

 $('.clk-Menu').on('click', function (event, param) {

            var link = '/DashBoard'


            $.ajax({
                url: link,
                type: 'POST',
                success: function (data) {
                    $('#content').animate({ 'margin-left': '0px' }, 400, 'easeOutQuint');
                    $('body,html').scrollTop(0);

                    $('#content').html(data);
                },
                error: function (data, request) {

                }
            });
        });

Answer 1

请先分配上面的activate函数，然后调用下面的函数。

function DashBoardController($scope, DashBoardFactory) {

  $scope.title = 'DashBoardController';
  $scope.activate = activate;
  $scope.Summary = []; 

  function activate() {
    DashBoardFactory.getSummary()
      .then(
        function(data) {
          console.log(data.data);
          $scope.Summary = data.data.collection;
          //angular.copy(data.data.collection, $scope.Summary);
        }, function(e) {
          alert(e.stautsText);
        });
  }
 **activate();**
}

您还需要对控制器分配方法进行一些更改

(function () {
    'use strict';

    var controllerId = 'DashBoardController';

    // TODO: replace app with your module name
    angular.module('CalcQouteModule',[]).controller(controllerId,
       ['$scope', '$modal', '$routeParams', '$http', '$route', '$timeout', 'DashBoardFactory']).controller(["$scope", "$modal", "$routeParams", "$http", "$route",
       "$timeout", "DashBoardFactory", function ($scope, $modal, $routeParams, $http, $route, $timeout, DashBoardFactory) {
           $scope.title = 'DashBoardController';
           $scope.activate = activate;
           $scope.Summary = [];

           function activate() {
               DashBoardFactory.getSummary()
                   .then(
                   function (data) {
                       console.log(data.data);
                       $scope.Summary = data.data.collection;
                       //angular.copy(data.data.collection, $scope.Summary);
                   }, function (e) { alert(e.stautsText); });
           }
           activate();

       }])
});    

变化是：-

• angular.module('CalcQouteModule',[]).......> 你错过了 []。模型上应该需要它

• a) 如果您使用了 rout 配置，那么您应该在该模型中包含 ngRoute。 （版本定义）

• angular.module('CalcQouteModule',[]).controller(controllerId,......... 这段代码我写的对，请看一下

• 我在该函数下方调用了activate(); 函数。

• 你应该在html页面中调用js文件

Answer 2

您可能忘记在模块初始化中包含依赖项，说您想要一个新的CalcQouteModule，您可以这样做：

angular.module('CalcQouteModule', [])

此代码：angular.module('CalcQouteModule') 实际上会尝试解析名为“CalcQouteModule”的现有 模块。如果没有 - 它将失败。

来自角度documentation：

请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。使用angular.module('myModule') 检索现有模块。

这是你的代码working:

更新：

您的DashboardsController.activate 方法永远不会执行。你可以通过几种方式做到这一点。这两个选项的工作示例是here。

又快又脏的方式

在你的 ajax 回调中：

$.ajax({
    url: link,
    type: 'POST',
    success: function (data) {
        // your code...
        $('#content').html(data);
        angular.element('#assemblystatustbl').scope().activate();
    },
    error: function (data, request) { /* ... */ }
});

角度方式

使用ng-click 和ng-show 制作动画：

<a href='#' ng-click='activate()' ng-show='animate-slide'>Dashboard</a>

这很可能需要更改一些超出此答案范围的代码，但如果您想使用 Angular 及其所有功能而不是手动操作 DOM 并使用许多 id 和 class 选择器。 以下是一些建议：

首先。您不想在onlick/onchange 中编写代码或使用 jquery 订阅它们，因为这些基本上超出了 Angular 的范围，并且框架不会正确跟踪它，这可能会导致无法预料的行为，就像你所拥有的那样这个问题。在所有情况下，您都可以通过 ng-click 或 ng-change 绑定使其工作。

第二。你不需要做 ajax 来获取服务器上生成的 html。让您的 ASP.NET 操作返回 JSON 而不是 HTML。它会让你免于这样的代码：$('#content').html(data);（顺便说一句，这真的很慢）。

确实。您可以使用 ng-include 指令从不同的 URI 请求您的 html：

<div ng-include="MyCurrentModuleUrl"></div>

如果您的 html 很小或静态，则模板在 Razor 视图中会像这样预渲染：

<script type="text/ng-template" id="@Url.Action("Dashboard")">
    @Html.Action("Dashboard")
</script>