提问者:小点点

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


我正在监视$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);
};

共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)准备就绪后才调用它,所以我很高兴。

哈姆杜利拉赫·卡西伦