데이터가 다시 변경된 후에도 시계를 트리거하는 지시문의 양방향 바인딩?

셰인

데이터 목록에서 값을 조회하고 항상 해당 값을 표시하는 지시문을 작성하고 있습니다. 이 plunkr 예제에서 데이터 변경 버튼을 클릭해도 결과가 변경되지 않는 이유는 무엇입니까? $ watch로 시도했지만 한 번만 실행됩니다.

플렁크 : http://plnkr.co/edit/9A3z0KMm8EaBNgYv1NmH?p=preview

예를 들어, 다음은 사용법입니다.

<lookup-binder lookup="lookupList" find="data.id" result="lookupList.description"></lookup-binder>

지시문은 다음과 같습니다.

app.directive('lookupBinder', function() {
  return {
    restrict: 'E',
    scope: {
      lookup: '=',
      find: '=',
      result: '='
    },
    controller: function($scope){
      console.log('controller fired');
    },
     link: function(scope, element, attrs, tabsCtrl) {
       console.log('link fired')
       scope.$watch(scope.find, function(newValue, oldValue) {
          console.log('watch fired');

          var el = _.find(scope.lookup, { id: scope.find });
        if(el != null){
          scope.result = el.description;
        }
        });


    },
    template: 'lookup Binder: <br/> lookupList: {{lookup}} <br/> find: {{find}} <br/> result: {{result}} <br/>'
  };
});

제어 장치:

var appName = angular.module('app', []);

angular.module('app').controller('testController', TestController);

TestController.$inject = ['$scope'];

function TestController($scope) {
    $scope.gradeLevels = [{
        id: '1',
        description: 'kindergarden'
    }, {
        id: '2',
        description: 'first grade'
    }];
    $scope.gradeLevel = {
        gradeLevelID: '1',
        record: 'test1'
    };
    console.info('gradeLevels[0].id = ' + $scope.gradeLevels[0].id);
    console.info('gradeLevel.gradeLevelID = ' + $scope.gradeLevel.gradeLevelID);
}
Eladcon

범위의 $watch함수는 문자열 또는 함수를 취하므로 다음 중 하나로 변경하십시오.

scope.$watch('find', function(newValue, oldValue) { 
    ...
}

또한의 결과 _.random는 숫자이고 ID는 문자열이므로 임의를 문자열로 변경하십시오.

$scope.data.id = _.random(1,4).toString();

플 런커 확인

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

양방향 바인딩이있는 격리 된 범위 지시문은 컨트롤러 범위의 변경 사항을 반영하지 않습니다.

분류에서Dev

지시문 양방향 데이터 바인딩에서 범위 변수 참조

분류에서Dev

각도 지시문 양방향 데이터 바인딩 실패

분류에서Dev

각도 지시문 양방향 데이터 바인딩 실패

분류에서Dev

각도에서 지시어의 컨트롤러를 사용한 양방향 데이터 바인딩

분류에서Dev

Angular JS 지시문, 링크 함수에서 양방향 데이터 바인딩 변경

분류에서Dev

격리 된 범위로 양식 입력 지시문의 양방향 바인딩

분류에서Dev

attributeChanged는 양방향 데이터 바인딩 폴리머에서 시작되지 않습니다.

분류에서Dev

지시문과 컨트롤러 간의 양방향 데이터 바인딩이 실패합니다. 왜?

분류에서Dev

양방향 데이터 바인딩이 Internet Explorer 9의 사용자 지정 지시문에서 작동하지 않습니다.

분류에서Dev

Angularjs 지시문 양방향 바운드 변수 변경이 부모 범위에서 $ digest를 트리거하지 않습니다.

분류에서Dev

양방향 바인딩에는 데이터 그리드의 경로 또는 XPath 오류가 필요합니다.

분류에서Dev

각도 양방향 데이터 바인딩은 범위 지시문을 격리하지만 속성이 정의되지 않았습니까?

분류에서Dev

양방향 바인딩 입력이있는 Angular2 구성 요소가 변경 이벤트를 트리거하지 않습니다.

분류에서Dev

컨트롤러에 대한 양방향 바인딩이 업데이트되지 않는 Angular transcluded 지시문

분류에서Dev

angularjs 지시문 양방향 바인딩이 작동하지 않습니다.

분류에서Dev

격리 범위가 *없는 * 지시문에서 양방향 데이터 바인딩을 얻는 방법은 무엇입니까?

분류에서Dev

AngularJS : 지시문 양방향 데이터 바인딩이 작동하지 않습니다.

분류에서Dev

선택기 변경에 따라 이벤트를 바인딩 해제하고 다시 바인딩하는 방법

분류에서Dev

angular2의 html 페이지에서 데이터 개체를 바인딩하는 방법이지만 다시로드 후 문제가 발생 함

분류에서Dev

사용자 지정 각도 지시문의 ng-switch가 양방향 바인딩을 중단합니다.

분류에서Dev

ng-model과 지시문 간의 양방향 데이터 바인딩

분류에서Dev

양방향 바인딩 INotifyPropertyChanged null 시도

분류에서Dev

angularjs-지시문-양방향 바인딩, 지시문의 컬렉션에서 키 가져 오기

분류에서Dev

각도 사용자 지정 지시문 ng-show 양방향 바인딩이 작동하지 않음

분류에서Dev

중첩 지시문에 대해 양방향 바인딩이 작동하지 않음-AngularJS

분류에서Dev

다른 listView에 연관된 데이터를 표시하도록 listView 바인딩

분류에서Dev

양방향 데이터 바인딩 값을 가져 와서 다른 변수에 설정하는 방법

분류에서Dev

데이터가 바인딩 된 후 지시문에서 DOM 조작

Related 관련 기사

  1. 1

    양방향 바인딩이있는 격리 된 범위 지시문은 컨트롤러 범위의 변경 사항을 반영하지 않습니다.

  2. 2

    지시문 양방향 데이터 바인딩에서 범위 변수 참조

  3. 3

    각도 지시문 양방향 데이터 바인딩 실패

  4. 4

    각도 지시문 양방향 데이터 바인딩 실패

  5. 5

    각도에서 지시어의 컨트롤러를 사용한 양방향 데이터 바인딩

  6. 6

    Angular JS 지시문, 링크 함수에서 양방향 데이터 바인딩 변경

  7. 7

    격리 된 범위로 양식 입력 지시문의 양방향 바인딩

  8. 8

    attributeChanged는 양방향 데이터 바인딩 폴리머에서 시작되지 않습니다.

  9. 9

    지시문과 컨트롤러 간의 양방향 데이터 바인딩이 실패합니다. 왜?

  10. 10

    양방향 데이터 바인딩이 Internet Explorer 9의 사용자 지정 지시문에서 작동하지 않습니다.

  11. 11

    Angularjs 지시문 양방향 바운드 변수 변경이 부모 범위에서 $ digest를 트리거하지 않습니다.

  12. 12

    양방향 바인딩에는 데이터 그리드의 경로 또는 XPath 오류가 필요합니다.

  13. 13

    각도 양방향 데이터 바인딩은 범위 지시문을 격리하지만 속성이 정의되지 않았습니까?

  14. 14

    양방향 바인딩 입력이있는 Angular2 구성 요소가 변경 이벤트를 트리거하지 않습니다.

  15. 15

    컨트롤러에 대한 양방향 바인딩이 업데이트되지 않는 Angular transcluded 지시문

  16. 16

    angularjs 지시문 양방향 바인딩이 작동하지 않습니다.

  17. 17

    격리 범위가 *없는 * 지시문에서 양방향 데이터 바인딩을 얻는 방법은 무엇입니까?

  18. 18

    AngularJS : 지시문 양방향 데이터 바인딩이 작동하지 않습니다.

  19. 19

    선택기 변경에 따라 이벤트를 바인딩 해제하고 다시 바인딩하는 방법

  20. 20

    angular2의 html 페이지에서 데이터 개체를 바인딩하는 방법이지만 다시로드 후 문제가 발생 함

  21. 21

    사용자 지정 각도 지시문의 ng-switch가 양방향 바인딩을 중단합니다.

  22. 22

    ng-model과 지시문 간의 양방향 데이터 바인딩

  23. 23

    양방향 바인딩 INotifyPropertyChanged null 시도

  24. 24

    angularjs-지시문-양방향 바인딩, 지시문의 컬렉션에서 키 가져 오기

  25. 25

    각도 사용자 지정 지시문 ng-show 양방향 바인딩이 작동하지 않음

  26. 26

    중첩 지시문에 대해 양방향 바인딩이 작동하지 않음-AngularJS

  27. 27

    다른 listView에 연관된 데이터를 표시하도록 listView 바인딩

  28. 28

    양방향 데이터 바인딩 값을 가져 와서 다른 변수에 설정하는 방법

  29. 29

    데이터가 바인딩 된 후 지시문에서 DOM 조작

뜨겁다태그

보관