4
이것은 AngularJS 앱을위한 것입니다. 서비스에 의존하는 사용자 지정 지시문이 있습니다.AngularJS : 사용자 작업이 모델과 DOM에 모두 영향을주는 경우
내가 정말로 궁금한 점은 모델과 DOM에 모두 영향을주는 사용자 작업을 다루는 "각도 방식"입니다. 일부 예제 코드 :
HTML :
<form foo-places>
<!--other stuff -->
<span ng-repeat="place in places">
<button ng-click="removePlace(place)">remove {{place}}</button>
</span>
</form>
JS : 사용자가 (버튼을 클릭하여) 장소를 제거
angular.module('foo.directives', []).directive('fooPlaces',
function(placesService) {
return {
controller : function($scope) {
$scope.places = placesService.places;
$scope.removePlace = function(name) {
placesService.removePlace(name);
};
$scope.$on('placesChanged', function() {
$scope.places = placesService.places;
});
},
link : function($scope, element, attrs) {
//code to do stuff when user removes a place
}
}
})
, 나는 또한 DOM과 혼란에 물건을 할 필요가 예를 들어 창을 맨 위로 스크롤하는 등의 작업을 할 수 있습니다. 컨트롤러에서 모델을 다루는 함수를 갖고있는 것이 이상하게 느껴지고 DOM 함수를 처리하는 지시문에서 또 다른 함수가됩니다.하지만 둘 다 같은 사용자를 기반으로합니다 동작.
나는 이것을 과소 평가 했는가? 모델과 DOM을 모두 다루는 단일 사용자 작업을 어떻게 처리해야합니까?
장소 모음에서 'scope. $ watch'를 사용하는 UI 변경 사항을 처리하기 위해 별도의 지시문을 사용할 수 있습니다. 그렇게하면 컬렉션에 대한 모든 변경 사항을 UI에 보편적으로 업데이트 할 수 있으며 작업 범위에 적합한 마크 업 요소에 해당 지시문을 추가하면됩니다. 두 가지 방법으로 모두 수행했으며 시계 추가는 섞기보다 깔끔하다고 생각합니다. 링크 함수에서 jQuery 또는 다른 dom 조작 항목을 사용하여 모델을 변경합니다. – Sounten
@ 샘턴 - 당신이 제안한대로 $ 시계를 추가하는 것이 더 깔끔하다는 것에 동의하는지 모르겠습니다. 하지만 내가 아는 것은 기본적인 예제를 넘어서서 anglejs에 대해 생각한 것이 항상 실제 물건을 만드는 가장 좋은 방법과 일치하지 않는다는 것입니다. 의견을 보내 주셔서 감사합니다. 나는 그걸 가지고 놀 것이다. – BjornJohnson