Question

我坚持使用angularjs数据显示。

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

所有事情都是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>

Displays this. not angular array

第一次它运作良好，但是当我通过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文件

   .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

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

angular.module('CalcQouteModule', [])

此代码：angular.module('CalcQouteModule')实际上会尝试使用名称＆＃39; CalcQouteModule＆＃39;解析现有模块。如果没有 - 它会失败。

从角度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) { /* ... */ }
});

Angular way

将ng-click和ng-show用于动画：

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

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

<强>第一即可。您不想在onlick / onchange中为您编写代码或使用jquery订阅代码，因为这些代码基本上没有角度范围，并且框架无法跟踪它正确的，可能导致不可预测的行为，如你对这个问题的行为。在所有情况下，您都可以通过ng-click或ng-change绑定来使其工作。

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

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

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

如果您的html很小或是静态的，那么

或模板在Razor视图中预先渲染：

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

Answer 2

请先指定上面的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（＆＃39; CalcQouteModule＆＃39;，[]）..........＆GT;你错过了[]。它应该在模型

上使用

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



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



我在下面的函数中调用了activate();函数。



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

AngularJS未在视图中显示数据

2 个答案:

更新

快速而肮脏的方式

Angular way

更改为： -