AngularJS 1.x - $scope 检查显示 $scope.data 但直接访问 $scope.data == undefined

Question

我正在观看 $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);
};

Answer 1

实际上很简单；

简单地观察了我感兴趣的数据属性，在新的 $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

AngularJS 1.x - $scope 检查显示 $scope.data 但直接访问 $scope.data == undefined

AngularJS 1.x - $scope inspections shows $scope.data but direct access to $scope.data == undefined

javascript

angularjs

angularjs-scope