标签: angularjs-ng-init

过去几周我一直在学习angularJs,并且正在研究一些大型应用程序,以了解现实世界中的工作原理.在大多数情况下,我注意到加载视图时:

ng-init="init()"

即在相关控制器中调用函数init().用于设置初始值.

但是(很大但是)在阅读ngInit上的角度文档时,我得到了一个相当严厉的描述:

"ngInit唯一适当的用于别名ngRepeat的特殊属性,如下面的演示所示.除了这种情况,你应该使用控制器而不是ngInit来初始化作用域上的值."

所以我的问题是,在加载视图时使用ngInit初始化作用域中的值是不好的做法？如果是这样,为什么会这样？什么是正确的方法？

我正在尝试使用ng-include和ng-init通过仅更改其数据来重用相同的组件.

组件代码("slider.html",没有控制器)如下所示:

<div ng-repeat="person in persons">
     {{person.name}}
</div>

从主视图,我想重用相同的组件更改"人员"列表,所以在视图中我有:

<!--slider #1 -->
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div>

<!-- slider #2 -->
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div>

在控制器中我初始化2个列表"英语"和"德语",如下所示:

 $scope.english = records.filter(function(t){return t.nationality=="english";});
 $scope.german = records.filter(function(t){return t.nationality=="german";});

会发生的是,2个组件显示相同的数据列表(德语); 有没有办法将2个不同的集合绑定到组件？

<input ng-model="search.name" placeholder="Name" />

<tbody>
<div ng-init="FilteredGeojson = ho|filter:search">
<tr ng-repeat="hf in FilteredGeojson">
    <td>{{ hf.name }}</td>   
</tr>
</div>
</tbody>
</table>
<div leaflet-directive id="map" data="FilteredGeojson"></div>

如果可能的话,在ng-init中进行过滤是很重要的,但是我无法解决它,我无法进行ng-repeat和创建我传递给我的指令的范围,因为它启动了无限的摘要循环.

我有一点问题.我想设置脏一个输入,我的意思是,因为当我自动给出一个值时它会保持在pristine类中,不会改变,也不会保存新值.

如果我编辑它,它可以工作并更改类.我想取消那pristine堂课.如果有人知道请告诉我.

<form class="form-horizontal" ng-repeat="studiant in studiants" name="form" id="form">

  <input type="hidden" name="id" value="{{studiant.studiant_id}}" class="form-control" disabled>

  <div class="form-group">
    <label for="school" class="col-md-2 control-label">School</label>
    <div class="col-md-1">
      <input type="text" id="school" name="school" class="form-control" ng-init="studiant.school=studiant.studiant_school" ng-model="studiant.school">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-md-2 control-label">Student's Name</label>
    <div class="col-md-10">
      <input type="text" id="name" name="name" class="form-control" ng-init="studiant.name=studiant.studiant_name" ng-model="studiant.name">
    </div>
  </div>
</form>

和剧本:

document.getElementbyId('name').value = "anything";

或者,如果我做错了,我必须改变value用的ng-model东西,请帮助我.

出于某种原因,当我将一个对象拼接到我的ng-repeat数组中时,它会使我拼接的内容加倍并隐藏数组中的最后一个对象.

但是,如果我单击切换隐藏并"刷新"它ng-repeat,它会显示正确的数据.

有谁知道为什么会发生这种情况以及我能做些什么来解决它？

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [{
        "id": "1334f68db820f664",
        "step_number": 1,
        "tasks": [{
          "id": "1334f68e3f20f665"
        }]
      }, {
        "id": "134967a5ba205f5b",
        "step_number": 2,
        "tasks": [{
          "id": "134972c5b420e027"
        }]
      }, {
        "id": "1334f68e7d209ae6",
        "step_number": 3,
        "tasks": [{
          "id": "1334f68ef6209ae7"
        }]
      }]
    };

    $scope.insertStep = function() {

      var insertStepIndex = 1,
        task_data = {
          "id": null,
          "step_number": (insertStepIndex + 2),
          "tasks": []
        };

      //go through each item in the array
      $.each($scope.workflow.flow, function(index, step) …

我有一个简单的指令来加载来自service(commentsService)的注释:

'use strict';

angular.module('mean.rank')
    .directive('commentList', function(CommentsService, Global) {
        return {
            restrict: 'E',
            templateUrl:  'rank/views/comments-list.html',
            replace: false,
            link: function($scope, element, attrs) {
                //accessing the ad info :  console.log("ADD  " , $scope.ad);
                $scope.comments = [];

                $scope.loadComments = function () {
                    console.log("in loadComments");
                    var adID = {};
                    adID.ad_ID = $scope.ad.nid;
                    console.log("calling services.getComments function with  " , adID.ad_ID);
                    CommentsService.getComments(adID.ad_ID)
                        .then(function (response) {
                            angular.forEach(comment in response)
                            $scope.comments.push(comment);
                        });


                };


            }
        }
    })

加载的注释应该加载到列表(在里面templateUrl)使用ng-init然后加载服务(如果需要,我将添加代码).

<div ng-init="loadComments()">
    <ul class="media-list comment-detail-list" > …

我正试图将一个对象从jade传递给ng-init

这个:不起作用:

ng-init='tables=!{JSON.stringify(tables)}'

这个:扩展但是,

ng-init='tables=#{JSON.stringify(tables)}'

输出未转义并填充"s

ng-init="tables={"12":{"id":....

并且在任何一种情况下都不更新视图.这篇文章暗示第一个应该工作,但就像我说的,它甚至没有扩展,

ng-init='tables=!{JSON.stringify(tables)}'

源代码在HTML源代码中显示完全相同

ng-init='tables=!{JSON.stringify(tables)}'

我有一个指令,我试图将ng-init变量设置为$scope

<select ng-init="safe.id=currentSafe" ng-options="safe as safe.name for safe in safes track by safe.id" ng-model="safe" ng-change="getSafeUrl(safe.id)"></select>

在link我的指令函数中:

$scope.currentSafe = '72824ca7-99ab-4f16-a56c-3c98328c73fd';

这不起作用.但是,如果我将模板更改为:

<select ng-init="safe.id='72824ca7-99ab-4f16-a56c-3c98328c73fd'" ng-options="safe as safe.name for safe in safes track by safe.id" ng-model="safe" ng-change="getSafeUrl(safe.id)"></select>

为什么我不能使用字符串,$scope但我可以直接使用它？

我想循环遍历这样的项目:

<section class="col-sm-4" data-ng-controller="PredictionsController" data-ng-init="findMyPredictions()">
    <div class="games">
        <div class="game-row" ng-repeat="prediction in predictions" ng-init="getGame(prediction.game_id)">
            <a class="button primary alt block" href="#!/predictions/{{prediction._id}}">
                <span class="home flag {{gameInfo.team1_key}}"></span>
        <span class="middle">
            <span class="date">{{gameInfo.play_at | date: 'd.MM HH:mm'}}</span>
            <span class="versus">{{gameInfo.team1_title}} - {{gameInfo.team2_title}}</span>
        </span>
                <span class="away flag {{gameInfo.team2_key}}"></span>
            </a>
        </div>
    </div>
</section>

但输出只是相同信息的X倍: 虽然请求正确完成:

知道这里有什么问题吗？

更新:我的getGame功能:

$scope.getGame = function (game_id) {
    $scope.gameInfo = {};
    $http.get('/games/' + game_id)
    .success(function (data) {
        $scope.gameInfo = data;
    });

};