角 - 数据不可用NG-里面的init [英] Angular - data not available inside ng-init

问题描述

角部分 - HTML。
BaseCtrl

 ＆LT; D​​IV NG控制器=SelectTagCtrl＆GT;
     ＆LT;输入类型=文本NG-的init =setTags（可视数据['用户']）UI-SELECT2 =tagAllOptionsNG模型=tagsSelectionNAME =用户/＆GT;
     {{计算机['用户']}}呼应正确。
     但不确定的NG-初始化回调里面过去了。
 ＆LT; / DIV＆GT; ＆LT;输入类型=文本级=span12占位符=简要说明NAME =说明值={{计算机[说明]}}＆GT;
 正确的回波。
 

Controller.js

 函数SelectTagCtrl（）{
 $ scope.setTags =功能（数据）{
    //使用计算机['用户']当数据undfined。 ＆LT;  - 问题
    当我通过一些静态的字符串//正确。
 }
}
//可视数据填充要使用的内部视图部分。功能BaseCtrl（）{
    $ http.get（URL）.success（功能（数据）{
    $ scope.viewData = ||数据。数据[];
    $ scope.view_type = $ scope.viewData ['的view_type'];
    $ scope.fields = data.data.fields;
    的console.log（$范围内）;  }）。错误（）;
}
 

解决方案

使用暂停将是一个解决办法，而不是我会采取 $范围控制器内部变量知道，如果Ajax调用已完成。

问题是 NG-INIT 可能会被称为AJAX完成之前。

我已经有了 UI-IF 指令在我的角度项目配置的，所以我的 $范围结合使用它变量得到的东西的工作。

 ＆LT; D​​IV NG控制器=SelectTagCtrlUI-IF =ajax_done＆GT;
     ＆LT;输入类型=文本NG-的init =setTags（可视数据['用户']）UI-SELECT2 =tagAllOptionsNG模型=tagsSelectionNAME =用户/＆GT;
＆LT; / DIV＆GT;
 

和内部控制，

  $ http.get（GURL +'以.json'）。成功（功能（数据，状态）{
      //一些东西
      $ scope.ajax_done = TRUE;
 }）。错误（）;
 

由于角的魔法双向绑定的，该元素将得到更新。现在它看到Ajax请求完成后， UI-IF 将得到一个truthy值和元素的NG-初始化指令将得到一个机会来执行它的回调。

修改： UI-IF 从的赞成 NG-如果的角度UI 这是目前内置的。

Angular partial - HTML. BaseCtrl

 <div ng-controller="SelectTagCtrl">       
     <input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"  />   
     {{viewData['users']}} ECHOES CORRECTLY. 
     But undefined when passed inside ng-init callback.
 </div>

 <input type="text" class="span12" placeholder="Brief Description" name="description" value="{{viewData['description']}}">
 ECHOES CORRECTLY.     

Controller.js

function SelectTagCtrl(){
 $scope.setTags = function(data){       
    // data is undfined when viewData['users'] is used. <-- PROBLEM
    // correct when I pass some static string. 
 }     
}


//POPULATING viewData to be used inside view partial.  

function BaseCtrl(){
    $http.get(url).success(function(data){   
    $scope.viewData = data.data || [];        
    $scope.view_type = $scope.viewData['view_type'];
    $scope.fields = data.data.fields;                   
    console.log($scope);

  }).error();
}

解决方案

Using timeout would be a workaround, instead I would take a $scope variable inside the controller to know if the ajax call has completed.

The problem is ng-init might get called before ajax completion.

I already had ui-if directive configured in my angular project, so I used it with the combination of $scope variable to get the things working.

<div ng-controller="SelectTagCtrl" ui-if="ajax_done">       
     <input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"  />  
</div>

And inside controller,

 $http.get(gurl + '.json').success(function(data,status){
      // some stuff
      $scope.ajax_done = true;
 }).error();

Because of angular's magical two-way binding, the element will get updated. Now it sees that ajax request is completed, ui-if will get a truthy value and ng-init directive of the element will get a chance to execute its callback.

EDIT: ui-if was removed from Angular UI in favour of ng-if which is now built in.

这篇关于角 - 数据不可用NG-里面的init的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！