angular $ watch父范围变量总是被触发

时间:2013-06-20 12:14:58

标签: angularjs scope parent watch directive

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指令时,父指令变量choicestips将被设置为某个东西,并且showTip指令总是监听选择提示的更改,并且当更改发生时警报更改。

问题

当我刷新页面时,它会立即警告更改,当我在setTip指令上停止鼠标时,没有任何反应。 注意:当鼠标停在setTip指令时,选择提示确实会发生变化。

我做错了什么?

这里是plunker link

1 个答案:

答案 0 :(得分:3)

要防止$watch在页面加载时触发,您需要比较您正在观看的模型的新值和新值:

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

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