AngularJS 1.x - $scope 检查显示 $scope.data 但直接访问 $scope.data == undefined
AngularJS 1.x - $scope inspections shows $scope.data but direct access to $scope.data == undefined
我正在观看 $scope.taskId,然后尝试在 $scope.data.
上访问 属性
这是我的函数:
$scope.$watch('taskId', function(value) {
console.log('here---------------');
console.log($scope, $scope.data);
var titlePrefix = undefined;
if (value) {
titlePrefix = $scope.getTaskTitlePrefix();
Page.setTitle(titlePrefix + $scope.taskId);
$scope.loadData();
}
});
我在上面的第 3 行记录 $scope 和 $scope.data。
(console.log($scope, $scope.data);)
这是控制台中的输出:
here---------------
m {$$childTail: m, $$childHead: b, $$nextSibling: m, $$watchers:
Array(81), $$listeners: Object…}
undefined
知道为什么 $scope 似乎准备好可用但它的变量却没有吗??
这是初始化 taskId 变量的 HTML,如您所见,这里发生了很多事情。这是一个主要的 Laravel 和 Angular 应用程序,有超过 2700 页,不包括供应商或节点文件夹(1700+ Laravel、1000+ angular)
<div ng-controller="TasksCtrl" ng-init="taskId = '{!! $task->id !!}'" ng-cloak>
<span ng-init="severities = {{ json_encode($severities) }}"></span>
<span ng-init="statuses = {{ $statuses }}"></span>
<span ng-init="users = {{ $users }}"></span>
<span ng-init="subtypes = {{ App\Modules\Bookings\TaskSubtype::support()->get() }}"></span>
<span ng-init="standard_prices = {{ StandardPrice::all() }}"></span>
<span ng-init="shelf_types = {{ json_encode(App\Modules\Bookings\Task::getShelfTypes()) }}"></span>
这是 tasks.blade.php 文件的摘录,该文件是页面的内容部分。
实际标题在 layouts.blade.php 中使用,它实际上设置了浏览器选项卡的标题,不是任何 "on page" 标题的标题。
>head<
>meta charset="utf-8"<
>meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"<
<title ng-controller="TitleController" ng-cloak>{[{ Page.getTitle() }]}</title>
这是在 taskId 更改时调用的 getTitle 函数。
archDB.factory('Page', function () {
var title = 'Seraph';
return {
getTitle: function() { return title; },
setTitle: function(newTitle) { title = newTitle; }
};
});
这里是来自浏览器控制台的 $scope 检查的 $scope.data 变量部分,以提供规模感。
data: m
$promise
:
d
$resolved
:
true
alarm_date
:
null
antivirus_state
:
null
assigned_to
:
104
attended_time
:
0
auto_booked
:
1
booking_fee
:
null
booking_fee_id
:
null
builds
:
Array(0)
cancelled_reason
:
null
client
:
Object
client_id
:
53
client_type
:
"client"
collected_at
:
null
completed
:
0
completed_at
:
null
created_at
:
"2016-12-07 11:23:03"
created_by
:
16
creator
:
Object
customer_notifications
:
Array(0)
deleted_at
:
null
delivered
:
0
delivered_by
:
null
devices
:
Array(0)
direct_dial
:
null
due_date
:
null
exchange_id
:
null
feedback
:
null
followup_id
:
null
formatedAttendedTime
:
""
formatedUnattendedTime
:
""
id
:
84222
invoice_number
:
null
invoiced
:
0
invoiced_at
:
null
invoiced_by_project
:
0
labour
:
0
modifier
:
Object
needs_calling
:
0
needs_delivery
:
null
no_price_reason
:
null
nopassword_reason
:
null
onsite_end
:
"0000-00-00 00:00:00"
onsite_start
:
"0000-00-00 00:00:00"
order_task_id
:
null
paid
:
0
paid_at
:
"2016-12-07"
parts
:
Array(0)
parts_total
:
0
passed_qa
:
null
passwords
:
Array(0)
pin
:
null
points
:
0
prebook
:
0
prebook_date
:
"01-01-1970"
problem
:
" removed"
project_id
:
null
qa_id
:
null
qa_tasks
:
Array(0)
related_tasks
:
Array(0)
return_id
:
null
revision_history
:
Array(0)
satisfied_client
:
null
seraph_id
:
null
severity_id
:
2
shelf
:
null
shelf_type
:
null
site
:
Object
site_id
:
53
site_user
:
Object
site_user_id
:
535
standard_price
:
null
standard_price_id
:
null
status
:
Object
status_id
:
1
subscribed_user
:
Array(0)
subscribers
:
Array(0)
subtype_id
:
1
template_items
:
Array(0)
templates
:
Array(0)
time_spent
:
0
title
:
"For Nadeem"
type
:
"support"
unattended_time
:
0
updated_at
:
"2016-12-07 11:24:04"
updated_by
:
94
user
:
Object
----------------编辑 00.14 --------------
这是一个 loadData 函数,它对 laravel api 进行 ajax 调用,并将响应分配给那里的 $scope.data
$scope.loadData = function() {
Tasks.get({taskId: $scope.taskId}, function(response){
$scope.data = response;
$scope.modified = false;
CustomerNotificationsService.setNotifications(response.customer_notifications);
$ClientsManager.setClient(response.client);
$ClientsManager.setClientType(response.client_type);
$scope.registerWatchers();
}, ErrorsHandler);
};
实际上很简单;
简单地观察了我感兴趣的数据 属性,在新的 $watch 中并将对 Page.setTitle 的调用拉入其中。
$scope.$watch('taskId', function(value) {
if (value) {
$scope.loadData();
}
});
// set browser tab title prefix
$scope.$watch('data.type', function(value) {
var browserTabTitlePrefix = undefined;
if(typeof value != 'undefined') {
browserTabTitlePrefix = $scope.getBrowserTabTitlePrefix(value);
Page.setTitle(browserTabTitlePrefix + $scope.taskId);
}
});
现在因为我正在观看正确的 属性 并且只在准备就绪后才调用子函数 (Page.setTitle) 我很高兴。
Alhamdulillaah katheerun
我正在观看 $scope.taskId,然后尝试在 $scope.data.
上访问 属性这是我的函数:
$scope.$watch('taskId', function(value) {
console.log('here---------------');
console.log($scope, $scope.data);
var titlePrefix = undefined;
if (value) {
titlePrefix = $scope.getTaskTitlePrefix();
Page.setTitle(titlePrefix + $scope.taskId);
$scope.loadData();
}
});
我在上面的第 3 行记录 $scope 和 $scope.data。
(console.log($scope, $scope.data);)
这是控制台中的输出:
here---------------
m {$$childTail: m, $$childHead: b, $$nextSibling: m, $$watchers: Array(81), $$listeners: Object…}
undefined
知道为什么 $scope 似乎准备好可用但它的变量却没有吗??
这是初始化 taskId 变量的 HTML,如您所见,这里发生了很多事情。这是一个主要的 Laravel 和 Angular 应用程序,有超过 2700 页,不包括供应商或节点文件夹(1700+ Laravel、1000+ angular)
<div ng-controller="TasksCtrl" ng-init="taskId = '{!! $task->id !!}'" ng-cloak>
<span ng-init="severities = {{ json_encode($severities) }}"></span>
<span ng-init="statuses = {{ $statuses }}"></span>
<span ng-init="users = {{ $users }}"></span>
<span ng-init="subtypes = {{ App\Modules\Bookings\TaskSubtype::support()->get() }}"></span>
<span ng-init="standard_prices = {{ StandardPrice::all() }}"></span>
<span ng-init="shelf_types = {{ json_encode(App\Modules\Bookings\Task::getShelfTypes()) }}"></span>
这是 tasks.blade.php 文件的摘录,该文件是页面的内容部分。
实际标题在 layouts.blade.php 中使用,它实际上设置了浏览器选项卡的标题,不是任何 "on page" 标题的标题。
>head<
>meta charset="utf-8"<
>meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"<
<title ng-controller="TitleController" ng-cloak>{[{ Page.getTitle() }]}</title>
这是在 taskId 更改时调用的 getTitle 函数。
archDB.factory('Page', function () {
var title = 'Seraph';
return {
getTitle: function() { return title; },
setTitle: function(newTitle) { title = newTitle; }
};
});
这里是来自浏览器控制台的 $scope 检查的 $scope.data 变量部分,以提供规模感。
data: m $promise : d $resolved : true alarm_date : null antivirus_state : null assigned_to : 104 attended_time : 0 auto_booked : 1 booking_fee : null booking_fee_id : null builds : Array(0) cancelled_reason : null client : Object client_id : 53 client_type : "client" collected_at : null completed : 0 completed_at : null created_at : "2016-12-07 11:23:03" created_by : 16 creator : Object customer_notifications : Array(0) deleted_at : null delivered : 0 delivered_by : null devices : Array(0) direct_dial : null due_date : null exchange_id : null feedback : null followup_id : null formatedAttendedTime : "" formatedUnattendedTime : "" id : 84222 invoice_number : null invoiced : 0 invoiced_at : null invoiced_by_project : 0 labour : 0 modifier : Object needs_calling : 0 needs_delivery : null no_price_reason : null nopassword_reason : null onsite_end : "0000-00-00 00:00:00" onsite_start : "0000-00-00 00:00:00" order_task_id : null paid : 0 paid_at : "2016-12-07" parts : Array(0) parts_total : 0 passed_qa : null passwords : Array(0) pin : null points : 0 prebook : 0 prebook_date : "01-01-1970" problem : " removed" project_id : null qa_id : null qa_tasks : Array(0) related_tasks : Array(0) return_id : null revision_history : Array(0) satisfied_client : null seraph_id : null severity_id : 2 shelf : null shelf_type : null site : Object site_id : 53 site_user : Object site_user_id : 535 standard_price : null standard_price_id : null status : Object status_id : 1 subscribed_user : Array(0) subscribers : Array(0) subtype_id : 1 template_items : Array(0) templates : Array(0) time_spent : 0 title : "For Nadeem" type : "support" unattended_time : 0 updated_at : "2016-12-07 11:24:04" updated_by : 94 user : Object
----------------编辑 00.14 --------------
这是一个 loadData 函数,它对 laravel api 进行 ajax 调用,并将响应分配给那里的 $scope.data
$scope.loadData = function() {
Tasks.get({taskId: $scope.taskId}, function(response){
$scope.data = response;
$scope.modified = false;
CustomerNotificationsService.setNotifications(response.customer_notifications);
$ClientsManager.setClient(response.client);
$ClientsManager.setClientType(response.client_type);
$scope.registerWatchers();
}, ErrorsHandler);
};
实际上很简单;
简单地观察了我感兴趣的数据 属性,在新的 $watch 中并将对 Page.setTitle 的调用拉入其中。
$scope.$watch('taskId', function(value) {
if (value) {
$scope.loadData();
}
});
// set browser tab title prefix
$scope.$watch('data.type', function(value) {
var browserTabTitlePrefix = undefined;
if(typeof value != 'undefined') {
browserTabTitlePrefix = $scope.getBrowserTabTitlePrefix(value);
Page.setTitle(browserTabTitlePrefix + $scope.taskId);
}
});
现在因为我正在观看正确的 属性 并且只在准备就绪后才调用子函数 (Page.setTitle) 我很高兴。
Alhamdulillaah katheerun