$Angular 지침의 데이터 변경에 대한 감시

$Angular 지침의 데이터 변경에 대한 감시

A를 트리거하려면 어떻게 해야 합니까?$watch내부 데이터(예: 데이터 삽입 또는 제거)를 조작할 때 Angular 명령어로 변수를 지정하지만 해당 변수에 새 개체를 할당하지 않는 경우

현재 JSON 파일에서 로드 중인 단순 데이터 세트가 있습니다.My Angular 컨트롤러는 이를 수행할 뿐만 아니라 몇 가지 기능을 정의합니다.

App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
    // load the initial data model
    if (!$scope.data) {
        JsonService.getData(function(data) {
            $scope.data = data;
            $scope.records = data.children.length;
        });
    } else {
        console.log("I have data already... " + $scope.data);
    }

    // adds a resource to the 'data' object
    $scope.add = function() {
        $scope.data.children.push({ "name": "!Insert This!" });
    };

    // removes the resource from the 'data' object
    $scope.remove = function(resource) {
        console.log("I'm going to remove this!");
        console.log(resource);
    };

    $scope.highlight = function() {

    };
});

나는 가지고 있다<button>적절히 불린$scope.add새로운 오브젝트가 올바르게 삽입되어 있습니다.$scope.data설정한 테이블은 "추가" 버튼을 누를 때마다 업데이트됩니다.

<table class="table table-striped table-condensed">
  <tbody>
    <tr ng-repeat="child in data.children | filter:search | orderBy:'name'">
      <td><input type="checkbox"></td>
      <td>{{child.name}}</td>
      <td><button class="btn btn-small" ng-click="remove(child)" ng-mouseover="highlight()"><i class="icon-remove-sign"></i> remove</button></td>
    </tr>
  </tbody>
</table>

단, 감시하도록 설정한 디렉티브는$scope.data이 모든 일이 일어났을 때 해고되는 게 아니라는 거죠

태그를 HTML로 정의합니다.

<d3-visualization val="data"></d3-visualization>

이는 다음 지시와 관련되어 있습니다(질문 건전성을 위해 트리밍됨).

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            });
        }
    }
});

이해하다"I see a data change!"처음에 메시지를 표시하지만, 그 이후에는 "추가" 버튼을 누르지 않습니다.

어떻게 하면 I will trigger를$watch오브젝트 추가/제거 중 이벤트 발생data오브젝트, 완전히 새로운 데이터 세트를 취득하지 않고data오브젝트?

상세 객체 더티 체크를 활성화해야 합니다.기본적으로 각도는 감시하는 최상위 변수의 참조만 확인합니다.

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            }, true);
        }
    }
});

「범위」를 참조해 주세요.$watch 함수의 세 번째 파라미터는 true로 설정되어 있는지 상세 더티 체크를 가능하게 합니다.

딥 더티 체크는 비용이 많이 든다는 점에 유의하십시오.그래서 만약 당신이 아이들 배열 전체를 보기만 한다면datavariable 변수를 직접 감시합니다.

scope.$watch('val.children', function(newValue, oldValue) {}, true);

버전 1.2.x에서는 $watch Collection이 도입되었습니다.

Skill은 객체의 속성을 감시하고 속성이 변경될 때마다 실행됩니다(어레이의 경우 어레이 항목을 감시하는 것을 의미하며 객체 맵의 경우 속성을 감시하는 것을 의미함).

scope.$watchCollection('val.children', function(newValue, oldValue) {});

왜냐하면 데이터를 깊이 가지고 트리거하려면 세 번째 인수를 통과해야 하기 때문입니다.true당신의 청취자의.디폴트로는false변수가 필드가 아닌 변수로 바뀔 때에만 작동하게 됩니다.

데이터를 사용할 수 있게 되면 jqplot을 사용하여 데이터를 플롯하는 지시문에 대한 내 버전:

    app.directive('lineChart', function() {
        $.jqplot.config.enablePlugins = true;

        return function(scope, element, attrs) {
            scope.$watch(attrs.lineChart, function(newValue, oldValue) {
                if (newValue) {
                    // alert(scope.$eval(attrs.lineChart));
                    var plot = $.jqplot(element[0].id, scope.$eval(attrs.lineChart), scope.$eval(attrs.options));
                }
            });
        }
});

언급URL : https://stackoverflow.com/questions/13980896/watching-for-data-changes-in-an-angular-directive