AngularJS1.x-$scope检查显示$scope.data，但直接访问$scope.data==未定义

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)；）

下面是控制台中的输出：

这里------------

m{$$ChildTail：m,$$ChildHead：b,$$NextSibling：m,$$Watchers：Array（81）,$$Listeners：Object…}

未定义

有什么想法为什么$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>

这是getTitle函数，当taskId发生变化时，它将被调用。

archDB.factory('Page', function () {
    var title = 'Seraph';
    return {
        getTitle: function() { return title; },
        setTitle: function(newTitle) { title = newTitle; }
    };
});

下面是来自浏览器控制台的$scope检查的$scope.data变量部分，以提供缩放感。

数据：m$承诺：d$解析：true alarm_date:空antivirus_state:null assigned_to:104 attended_time:0 auto_booked:1预订费：空booking_fee_id:空生成：数组（0）cancelled_reason:空客户端：对象client_id:53客户端类型：“Client”collected_at：已完成null：0已完成_AT：created_at为空：“2016-12-07 11:23:03”创建人：16创建者：对象customer_notifications:数组(0)deleted_at:传递得空：0 delivered_by:空设备：数组(0)direct_dial:空due_date:空exchange_id:空反馈：followup_id为空：空formatedAttendedTime：“”formatedUnattendedTime：“”id：84222发票号：空发票：0 invoiced_at:null invoiced_by_project:0人工：0修改符：对象needs_calling：0 needs_delivery:no_price_reason为空：空nopassword_reason:空onsite_end:“0000-00-00 00:00:00”onsite_start:“0000-00-00 00:00:00”order_task_id:空付款：0 paid_at:“2016-12-07”零件：数组(0)parts_total:0通过_QA:空密码：阵列（0）引脚：空点：0预购：0 prebook_date:“01-01-1970”问题：“已删除”project_id:空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:null Array（0）

-------------编辑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

其实很简单；

只需在new$watch中查看我感兴趣的data属性，并将对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）准备就绪后才调用它，所以我很高兴。

哈姆杜利拉赫·卡西伦