AngularJS未在视图中显示数据

I stuck with the angularjs data display in view.

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

I got correct data in angular controller. but it is not binding in HTML.

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

All things are corencct.

一切都是corencct。

  <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>

First time It works good, but when i call view via ajax got this problem

第一次它运作良好，但当我通过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);});
    }
}

RouteConfig File

RouteConfig文件

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

loading partialview

加载partialview

 $('.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) {

                }
            });
        });

2 个解决方案

#1

Please first assign the activate function above, then you call the function below.

请先分配上面的激活功能，然后调用下面的功能。

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

And also you need some changes in your controller assigning method

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

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

       }])
});    

Changes are :-

• angular.module('CalcQouteModule',[])..........> You have missed the []. It should be needed on model

  angular.module（'CalcQouteModule'，[]）..........>你错过了[]。它应该在模型上需要

• a) If you used rout config, then you should be include ngRoute in that model. (version defined)

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

• angular.module('CalcQouteModule',[]).controller(controllerId,.......... . I wrote this code in proper way, please take a look that

  angular.module（'CalcQouteModule'，[]）。controller（controllerId，..........我以正确的方式编写了这段代码，请看一下

• I have called the activate(); function in below that function.

  我调用了activate（）;功能在下面那个功能。

• And You should be call the js file in html page

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

#2

you probobly forgot to include dependecies in your module initialization saying that you want a new CalcQouteModule, which you can do like this:

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

angular.module('CalcQouteModule', [])

This code: angular.module('CalcQouteModule') will actually try to resolve existing module with the name 'CalcQouteModule'. If there isn't one - it will fail.

此代码：angular.module（'CalcQouteModule'）实际上将尝试使用名称“CalcQouteModule”来解析现有模块。如果没有 - 它会失败。

From angular documentation:

从角度文档：

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

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

Here is your code working:

这是你的代码工作：

Update:

Your DashboardsController.activate method is never executed. You can do it in a couple ways. Working example for both options is here.

永远不会执行您的DashboardsController.activate方法。你可以通过几种方式实现这一目标。这两个选项的工作示例都在这里。

Quick and dirty way

Inside your ajax callback:

在你的ajax回调中：

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

Angular way

Use ng-click and ng-show for animation:

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

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

Most likely this will require to change some code that is out of this answer's scope but this is what you should do if you want to use Angular and all it's features rather than manipulating DOM manually and using numerous id and class selectors. Here are some piecies of advise:

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

First. You don't want to write you code in onlick/onchange or subscribe on them using jquery since those are basically out of angular's scope and framework won't track it properly which might cause unpredicted behavior like the one you have with this question. In all cases you can make it work through ng-click or ng-change bindings.

第一。你不想在onlick / onchange中编写代码或使用jquery在它们上订阅，因为它们基本上不在angular的范围内，并且框架不能正确地跟踪它，这可能会导致像你对这个问题的行为那样的不可预测的行为。在所有情况下，您都可以通过ng-click或ng-change绑定使其工作。

Second. you dont't need to do ajax to fetch html generated on the server. Make your ASP.NET actions return JSON rather than HTML. It will save you from code like this: $('#content').html(data); (which is really slow, by the way).

第二。你不需要做ajax来获取服务器上生成的html。使ASP.NET操作返回JSON而不是HTML。它将为您节省以下代码：$（'＃content'）。html（data）; （顺便说一下，这真的很慢）。

Thid. you can request your html from diffent URIs using ng-include directive:

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

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

or templates prerendeed like this in Razor view if your html is small or static:

或者模板在Razor视图中预先渲染，如果您的html很小或是静态的：

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