Angular - 数据在 ng-init 中不可用 [英] Angular - data not available inside ng-init
问题描述
Angular 部分 - HTML.基本控件
<input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"/>{{viewData['users']}} 正确响应.但是在 ng-init 回调中传递时未定义.<input type="text" class="span12" placeholder="Brief Description" name="description" value="{{viewData['description']}}">正确回声.
Controller.js
function SelectTagCtrl(){$scope.setTags = 函数(数据){//使用 viewData['users'] 时未定义数据.<-- 问题//当我传递一些静态字符串时更正.}}//填充要在视图部分中使用的视图数据.函数 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);}).错误();}
使用 timeout
将是一种解决方法,相反我会在控制器中使用一个 $scope
变量来知道 ajax 调用是否已完成.
问题是 ng-init
可能在 ajax 完成之前被调用.
我已经在我的 angular 项目中配置了 ui-if
指令,所以我将它与 $scope
变量的组合一起使用以使事情正常工作.
<input type="text" ng-init="setTags(viewData['users'])" ui-select2="tagAllOptions" ng-model="tagsSelection" name="users"/>
在控制器内部,
$http.get(gurl + '.json').success(function(data,status){//一些东西$scope.ajax_done = true;}).错误();
由于 angular 的神奇双向绑定,元素将得到更新.现在它看到 ajax 请求已完成,ui-if
将获得一个真值,元素的 ng-init 指令将有机会执行其回调.
EDIT:ui-if
已从 Angular 中删除UI 支持 ng-if 现在内置.
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.
这篇关于Angular - 数据在 ng-init 中不可用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!