AngularJS 1.6：组件内标签在$watch触发时未更新

你遇到的核心问题是**$watch回调函数中的this上下文错误**——在回调里你修改的this.title并不是控制器实例（viCtrl）上的属性，而是当前$scope的属性，这就导致模板绑定的viCtrl.title根本没发生变化，自然不会触发重新渲染。

为什么会这样？ #

在AngularJS的$watch回调函数中，this默认指向的是当前的$scope对象，而不是你定义的VesselInfoController实例。所以你在回调里对this的赋值操作，都是在给$scope添加新属性，和模板绑定的viCtrl毫无关系。

解决方法 #

最直接的修复方式是提前保存控制器实例的引用，在回调里使用这个引用来修改属性。这里有几种常用的方案：

方案1：保存控制器实例到变量（最兼容、最常用）

在控制器开头把this赋值给一个变量（比如vm，代表ViewModel），之后所有需要操作控制器属性的地方都用这个变量：

mapApp.component("vesselInfo", { 
    template : '<div class="vessel-info" > <div ng-bind="viCtrl.title"></div> </div>', 
    bindings: { }, 
    controller: VesselInfoController, 
    controllerAs: 'viCtrl' 
}); 

function VesselInfoController($scope, $element, $attrs, $http, SelectedVessel) { 
    var vm = this; // 保存控制器实例的引用
    vm.title = 'No Vessel Selected'; 
    vm.selectedVessel = SelectedVessel.getSelectedVessel(); 

    $scope.$watch(watchSource, function(current, previous){ 
        vm.selectedVessel = current; 
        if(current) { 
            vm.title = 'Name : ' + current.name; 
        } else { 
            vm.title = 'No Vessel Selected'; 
        } 
    }); 

    function watchSource(){ 
        return SelectedVessel.getSelectedVessel(); 
    }
}

方案2：使用ES6箭头函数（如果你的环境支持）

箭头函数会继承外部作用域的this，所以回调里的this会直接指向控制器实例：

$scope.$watch(watchSource, (current, previous) => { 
    this.selectedVessel = current; 
    if(current) { 
        this.title = 'Name : ' + current.name; 
    } else { 
        this.title = 'No Vessel Selected'; 
    } 
});

方案3：用bind()绑定回调的this

手动把回调函数的this绑定为控制器实例：

$scope.$watch(watchSource, function(current, previous){ 
    this.selectedVessel = current; 
    if(current) { 
        this.title = 'Name : ' + current.name; 
    } else { 
        this.title = 'No Vessel Selected'; 
    } 
}.bind(this)); // 绑定this为控制器实例

为什么之前的$apply失效？ #

之前你尝试用$apply触发页面重载，但因为你修改的是$scope上的属性（而不是viCtrl的），即使触发了$apply，模板绑定的目标属性没有变化，所以页面自然不会更新。修复this的上下文后，AngularJS会自动检测到viCtrl.title的变化，无需手动调用$apply。

内容的提问来源于stack exchange，提问作者acdgordon