Angularjs는 상위 범위의 변화를 감시합니다.

Angularjs는 상위 범위의 변화를 감시합니다.

지시문을 작성 중인데 변화를 위해 부모 범위를 지켜봐야 합니다.바람직한 방법인지는 모르겠지만 다음 코드에서는 작동하지 않습니다.

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

이는 윈도우 로드에 기록되지만 오버레이 타입이 변경되어도 다시 기록되지 않습니다.

어떻게 봐?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();
      });
    }
  };
});

상위 범위의 속성을 보려면 다음을 사용할 수 있습니다.$watch메서드를 지정합니다.

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

2016년 편집:이상과 같은 것은 문제 없습니다만, 그다지 깔끔한 디자인은 아닙니다.대신 디렉티브 또는 컴포넌트를 사용하고 그 의존성을 바인딩으로 선언합니다.이를 통해 성능이 향상되고 설계가 깔끔해집니다.

이것을 실행하기 위해서 컨트롤러간의 $broadcast를 사용하는 것을 추천합니다.이것은 부모/자녀 컨트롤러간의 통신의 각도가 높은 방법인 것 같습니다.

개념은 간단합니다. 부모 컨트롤러에서 값을 감시한 후 수정이 발생하면 브로드캐스트하여 자녀 컨트롤러에서 캡처할 수 있습니다.

여기에 그것을 증명하는 바이올린이 있습니다.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
});

이 솔루션의 좋은 점은 다른 아이 컨트롤러에서 수정 내용을 보고 싶다면 동일한 이벤트를 포착할 수 있다는 것입니다.

즐겁게 보내세요

Edit : 지난번 편집에서는 보이지 않았지만, 지령에도 대응하고 있습니다.이전 바이올린을 업데이트했습니다(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();
      });
    }
  };
});

하위 스코프에 데이터 속성이 있어야 합니다. 스코프는 상위 스코프와 하위 스코프 간에 프로토타입 상속을 사용합니다.

또한 $watch 메서드가 기대하는 첫 번째 인수는 변수의 값이 아닌 식 또는 함수입니다.그래서 당신은 그것을 대신 보내야 합니다.

하위 스코프 내에서 상위 스코프 변수를 감시하려는 경우,true두 번째 논거로서$watch오브젝트가 변경될 때마다 워치가 트리거됩니다.

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

조금 시간이 걸렸지만, 여기 제 의견이 있습니다.이벤트 옵션도 마음에 듭니다.

업데이트된 바이올린 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");
});

여기서 보여드리는 것은 자녀와 부모로부터 양방향 바인딩이 있지만 자녀가 부모에게 접근하여 속성을 얻을 필요가 없는 변수를 가질 수 있다는 것입니다.지시문 위에 새로운 부모를 추가하면 사물에 손을 대는 경향이 미쳐버릴 수 있습니다.

상자에 입력하면 컨트롤러의 모델이 업데이트되고, 다음으로 디렉티브의 속성에 바인딩되어 디렉티브로 업데이트됩니다.Directives Link 기능에는 워치가 설정되어 있기 때문에 스코프 변수가 변경될 때마다 카운터가 증가합니다.

격리 범위에 대한 자세한 내용과 = @ 또는 & 사용 간의 차이점에 대한 자세한 내용은 http://www.egghead.io/를 참조하십시오.

언급URL : https://stackoverflow.com/questions/17838745/angularjs-watch-for-change-in-parent-scope