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

저는 AngularJS에 처음으로 익숙하며 처음으로 지시문을 작성합니다.양방향 데이터 바인딩이 지시문에서 작동하지 않습니다.

Bootstrap Year Calendar을 AngularJS와 함께 사용하려고합니다. 약속이있는 캘린더를 표시하는 것은 jQuery 플러그인입니다.

나는 달력 만들려면이 지침을 작성했습니다 :

app.directive('calendarScheduler', [function() { 
     return { 
      restrict: 'A', 
      scope: { 
       calendarData: '=' 
      }, 
      link: function (scope, element, attrs, ctrl) { 
       element.calendar({ 
        enableRangeSelection: true, 
        dataSource: scope.calendarData 
       }); 
      } 
     } 
    }]);

데이터는이 컨트롤러의 지시에 전달됩니다

<body ng-app="App"> 
    <div ng-controller="UserCtrl"> 
     <div 
      calendar-scheduler 
      id="calendar" 
      class="calendar" 
      calendar-data="User.eventsData"> 
     </div> 
     <button data-ng-click="UserHoliday.addData();">Add Data</button> 
    </div> 
</body>

: 여기

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

app.controller('UserCtrl', ['$scope', 
    function($scope) { 
     $scope.User = {}; 
     $scope.User.eventsData = []; 

     init(); 

     $scope.User.addData = function(startDate, endDate) { 
      $scope.User.eventsData.push({ 
       id: 2, 
       name: 'Apple Special Event', 
       location: 'San Francisco, CA', 
       startDate: new Date(2016, 6, 28), 
       endDate: new Date(2016, 6, 29) 
      }); 
     }; 

     function init() { 
      $scope.User.eventsData = [ 
       { 
        id: 0, 
        name: 'Google I/O', 
        location: 'San Francisco, CA', 
        startDate: new Date(2016, 4, 28), 
        endDate: new Date(2016, 4, 29) 
       }, 
       { 
        id: 1, 
        name: 'Microsoft Convergence', 
        location: 'New Orleans, LA', 
        startDate: new Date(2016, 2, 16), 
        endDate: new Date(2016, 2, 19) 
       } 
      ]; 
     } 
    }]);

그리고는 HTML입니다

Plunker showing the result

지시문을 만들 때 데이터가 전달되면 모든 것이 작동하지만 캘린더에 더 많은 데이터를 추가하기 위해 버튼을 클릭하면 표시된 데이터가 업데이트되지 않습니다 (새 약속이 하나 표시되어야 함). 또한 $ http를 사용하여로드 된 데이터를 표시하지 않습니다. 컨트롤러와 지시문에서 $ scope. $ apply()를 사용하여 $ scope를 업데이트했지만 "$ already already in progress"오류가 발생합니다.

내가 말했듯이 저는 AngularJS에 처음으로 익숙합니다.이 작업을 수행하는 방법을 모르거나 내가 여기에 뭔가를 놓친다면.

희망 하시겠습니까? 감사.

출처

2016-12-15 Sergi

데이터를 한 번만 바인딩하므로 결코 업데이트되지 않습니다. 대신 '시계'데이터 수집 :

이

app.directive('calendarScheduler', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      calendarData: '=' 
     }, 
     link: function (scope, element, attrs, ctrl) { 
      function init() { 
       element.calendar({ 
        enableRangeSelection: true, 
        dataSource: scope.calendarData 
       }); 
      } 

      // re-init when data is changed 
      scope.$watchCollection("calendarData", function(val) { 
       // according to the documentation, data can be updated by doing: 
       element.data("calendar").setDataSource(val); 
      }); 

      init(); 

      scope.$on("$destroy", function() { 
       // not sure if this is supported by the library, 
       // but is a best practice to prevent memory leaks 
       element.calendar("destroy"); 
      }); 
     } 
    } 
}]);

출처

2016-12-15 11:55:59 devqon

은'ngModel' 지시어는이 경우에 그 자체로 necesarry되지 않으며, 중요한 것은 범위가 범위를 통해 변경할 것을 각 알려 드리고자합니다 JQuery와 이벤트가 외부 일부터 $ 적용됩니다. 각도의. – Walfrat

그래, 먼저 잘못 읽은 것 같아. 입력이라고 생각 했어. – devqon

그것은 매력처럼 작동했다. 대단히 감사합니다 !! $ watch를 사용했지만 데이터를 한 번만 업데이트했는데 (왜 그런지 모르지만) $ watchCollection에 대해 알지 못했습니다. – Sergi

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

답변

관련 문제