angular.js - angular自訂指令中如何監視屬性值的變化

Question

html

<p on-test data={{userinfo}}></p>
//自定义指令on-test，contorller中通过ajax的方式从后台拿到userinfo，userinfo是一段很长的json字符串，会随着用户的操作而变化

directive

app.directive('onTest', function () {
    return {
        restrict: 'A',
        scope:{
          test:'@data'
        },
        link: function(scope , element, attr) {
            console.log(scope)
            /**
            *我想在这里拿到后台传过来的userinfo字符串，通过userinfo操作我的dom界面
            **/
        }
    };
});

我的疑惑：

• 我在link中打印scope，可以看到傳遞過來的數據，但是通過scope.test的方式無法獲取我的數據

Answer 1

雷雷

Answer 2

同志，你的玩法不對哦：

首先是模板部分，既然你想監視userInfo的變化，那用雙向綁定的方式最合適不過了，但你寫的是綁定屬性(這個不夠帥):

<p on-test data="userinfo"></p>
<!--这样就可以了-->

下面是指令註冊的部分：

app.directive('onTest', function () {
    return {
        restrict: 'A',
        scope:{
          test:'=data'//双向绑定用=
        },
        link: function(scope , element, attr) {
            console.log(scope.test);//high不high？拿到了哦
                       
            scope.$watch('test', function(newVal){
                console.log(newVal);//每次你在controller里修改了userInfo，这里都会打印
            }, true);
        }
    };
});