angularjs - 角度 $watch 父范围变量总是被触发

Question

html

<div data-select >
     <div data-set-tip tipit='selecting(tips)' ></div>
     <div data-show-tip headsup='selectingtips' ></div>
</div>

js

directive.select= function(){
    return:{
        restrict:'A',
        controller:function($scope){
            $scope.selectingtips = '';
            $scope.selecting = function(tips){
                $scope.selectingtips = tips
            }
        }
    }
}

directive.setTip = function(){
    return {
        restrict:'A',
        scope:{
            tipit:'&'
        },
        link:function(scope,element,attrs){
            element.on('mousestop',function(){
                scope.tipit({tips:'some tips'})
            })
        }
    }

}

directive.showTip = function(){
    return {
        restrict:'A',
        scope:{
            headsup:'&'
        },
        link:function(scope,element,attrs){
            scope.$watch('headsup',function(){
                alert('changed')
            })
        }

    }
}

我希望当鼠标在 setTip 指令处停止时，父指令变量 selectiontips 将被设置为某个值，并且 showTip 指令总是监听选择提示的变化，并且当变化发生时警报变化。

问题

当我刷新页面时，它会立即提醒更改，当我在 setTip 指令上停止鼠标时，什么也没有发生。注意：当鼠标在 setTip 指令处停止时，选择提示确实发生了变化。

我做错了什么？

这是plunker链接

Answer 1

为了防止$watch在页面加载时触发，您需要比较您正在观看的模型的旧值和新值：

scope.$watch('headsup',function(newVal, oldVal){
    if(newVal != oldVal)
        alert('changed')
})

查看更新的 plunker： http ://plnkr.co/edit/5kJSZtVA9a8o4tRdnPaT?p=preview