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

问题

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

我做错了什么？

这里是plunker link

Answer 1

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

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

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

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

1 个答案: