Angularjs監視父範圍的變化

Question

我正在編寫一個指令，我需要觀察變更的父範圍。不知道如果我這樣做的首選方式，但它不是用下面的代碼工作：

scope.$watch(scope.$parent.data.overlaytype,function() { 
    console.log("Change Detected..."); 
    }) 

這是登錄窗口負載，但從來沒有一次，即使overlaytype改變。

如何查看overlaytype進行更改？

編輯：這裏是整個指令。不完全知道爲什麼我得到一個子範圍

/* Center overlays vertically directive */ 
aw.directive('center',function($window){ 
    return { 
    restrict : "A", 
    link : function(scope,elem,attrs){ 

     var resize = function() { 
     var winHeight = $window.innerHeight - 90, 
      overlayHeight = elem[0].offsetHeight, 
      diff = (winHeight - overlayHeight)/2; 
      elem.css('top',diff+"px"); 
     }; 

     var watchForChange = function() { 
     return scope.$parent.data.overlaytype; 
     } 
     scope.$watch(watchForChange,function() { 
     $window.setTimeout(function() { 
      resize(); 
     }, 1); 
     }) 

     angular.element($window).bind('resize',function(e){ 
     console.log(scope.$parent.data.overlaytype) 
     resize(); 
     }); 
    } 
    }; 
}); 

Answer 1

你應該有你的孩子範圍數據性質，範圍使用父母和孩子之間的範圍原型繼承。

此外，第一個參數方法期望的是一個表達式或函數來評估，而不是一個變量的值，所以你應該發送它。

Answer 2

我會建議你使用控制器之間的$廣播執行此，這似乎是更父/子控制器之間的通信的角度方式

這個概念很簡單，你在父腕錶的價值然後，控制器在修改時，您可以播放它，抓住它的子控制器

這裏有一個小提琴證明它：http://jsfiddle.net/DotDotDot/f733J/

父控制器的部分看起來像這樣：

$scope.$watch('overlaytype', function(newVal, oldVal){ 
    if(newVal!=oldVal) 
     $scope.$broadcast('overlaychange',{"val":newVal}) 
}); 

，並在子控制器：

$scope.$on('overlaychange', function(event, args){ 
    console.log("change detected") 
    //any other action can be perfomed here 
}); 

好點的這個解決方案，如果你想觀看其他孩子控制器的修改，你可以捕捉同一事件

玩得開心

編輯：我沒有看到你上次編輯，但我的解決方案也適用於該指令，我更新了以前的小提琴（http://jsfiddle.net/DotDotDot/f733J/1/）

我修改你的指令，迫使它創建一個子範圍，創建一個控制器：

directive('center',function($window){ 
    return { 
    restrict : "A", 
    scope:true, 
    controller:function($scope){ 
     $scope.overlayChanged={"isChanged":"No","value":""}; 
     $scope.$on('overlaychange', function(event, args){ 
     console.log("change detected") 
     //whatever you need to do 

    }); 
    }, 
link : function(scope,elem,attrs){ 

    var resize = function() { 
    var winHeight = $window.innerHeight - 90, 
     overlayHeight = elem[0].offsetHeight, 
     diff = (winHeight - overlayHeight)/2; 
     elem.css('top',diff+"px"); 
    }; 
    angular.element($window).bind('resize',function(e){ 
    console.log(scope.$parent.data.overlaytype) 
    resize(); 
     }); 
    } 
    }; 
}); 

Answer 3

好了，在這裏我花了一段是我的兩分錢，我喜歡的活動選項也不過：

更新小提琴 http://jsfiddle.net/enU5S/1/

的HTML

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <input type="text" model="model.someProperty"/> 
    <div awesome-sauce some-data="model.someProperty"></div> 
</div> 

的JS

angular.module("myApp", []).directive('awesomeSauce',function($window){ 
    return { 
    restrict : "A", 
     template: "<div>Ch-ch-ch-changes: {{count}} {{someData}}</div>", 
     scope: {someData:"="}, 
     link : function(scope,elem,attrs){ 
     scope.count=0; 
     scope.$watch("someData",function() { 
      scope.count++; 
     }) 
    } 
    }; 
}).controller("MyCtrl", function($scope){ 
    $scope.model = {someProperty: "something here"); 
}); 

什麼，我在這裏展示的是你可以有兩個辦法從孩子和家長結合，但不要求孩子達到了它的變量是父母得到一個屬性。如果您在指令上添加新的父項，那麼達成事情的趨勢可能會變得瘋狂。

如果您在該框中鍵入，它將更新控制器上的模型，這反過來又被綁定到指令上的屬性，因此它將在指令中更新。在指令鏈接功能中，它有一個監視設置，所以無論何時，範圍變量改變它都會增加一個計數器。

查看更多關於分離範圍和使用= @或&這裏之間的區別：http://www.egghead.io/

Answer 4

如果你想觀看父母範圍的屬性，你可以使用$watch方法從父範圍。

//intead of $scope.$watch(...) 
$scope.$parent.$watch('property', function(value){/* ... */}); 

編輯2016年 以上應該工作得很好，但它確實不是一個乾淨的設計。嘗試使用directive或component，並將其依賴關係聲明爲綁定。這應該會導致更好的性能和更清潔的設計。

Answer 5

如果您正在尋找在子範圍內觀察父範圍變量，則可以在$watch上添加true作爲第二個參數。這會觸發你的手錶每當你的對象被修改時

$scope.$watch("searchContext", function (ctx) { 
       ... 
      }, true);