매개 변수 변경시 Angular Directive 새로 고침
다음과 같이 초기화되는 각도 지시문이 있습니다.
<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>
나는 그것이 $scope.some_prop완전히 다른 내용을 보여야 함을 의미하기 때문에 지시문이 변경 될 때 새로 고칠 수있을만큼 똑똑하기를 바랍니다 .
나는 그것을 그대로 테스트했지만 아무 일도 일어나지 않으며, $scope.some_prop변경 될 때 연결 기능이 호출되지도 않습니다 . 이것을 가능하게하는 방법이 있습니까?
링크 함수는 한 번만 호출되므로 예상 한 작업을 직접 수행하지 않습니다. $watch모델 변수를 보려면 각도를 사용해야 합니다.
이 시계는 링크 기능에서 설정해야합니다.
지시문에 격리 된 범위를 사용하는 경우 범위는
scope :{typeId:'@' }
링크 기능에서 다음과 같은 시계를 추가합니다.
link: function(scope, element, attrs) {
scope.$watch("typeId",function(newValue,oldValue) {
//This gets called when data changes.
});
}
격리 된 범위를 사용하지 않는 경우 시계를 사용하십시오. some_prop
당신이하려는 것은 지시문의 속성 속성을 모니터링하는 것입니다. 다음과 같이 $ observe () 를 사용하여 속성 변경의 속성을 볼 수 있습니다 .
angular.module('myApp').directive('conversation', function() {
return {
restrict: 'E',
replace: true,
compile: function(tElement, attr) {
attr.$observe('typeId', function(data) {
console.log("Updated data ", data);
}, true);
}
};
});
모델이 있는지 여부와 이것이 성능에 민감한 지 여부를 언급하지 않았기 때문에 여기 지시문에서 '컴파일'기능을 사용했습니다.
모델이있는 경우 ' compile '함수를 ' link '로 변경하거나 ' controller '를 사용해야하며 모델 변경 사항의 속성을 모니터링하려면 $ watch ()를 사용 하고 각도 {{}}를 가져와야합니다. 속성의 대괄호, 예 :
<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>
그리고 지시문에서 :
angular.module('myApp').directive('conversation', function() {
return {
scope: {
typeId: '=',
},
link: function(scope, elm, attr) {
scope.$watch('typeId', function(newValue, oldValue) {
if (newValue !== oldValue) {
// You actions here
console.log("I got the new value! ", newValue);
}
}, true);
}
};
});
이것이 부모 범위의 값에 대한 지시문을 다시로드 / 새로 고침하는 데 도움이되기를 바랍니다.
<html>
<head>
<!-- version 1.4.5 -->
<script src="angular.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<my-test reload-on="update"></my-test><br>
<button ng-click="update = update+1;">update {{update}}</button>
</body>
<script>
var app = angular.module('app', [])
app.controller('Ctrl', function($scope) {
$scope.update = 0;
});
app.directive('myTest', function() {
return {
restrict: 'AE',
scope: {
reloadOn: '='
},
controller: function($scope) {
$scope.$watch('reloadOn', function(newVal, oldVal) {
// all directive code here
console.log("Reloaded successfully......" + $scope.reloadOn);
});
},
template: '<span> {{reloadOn}} </span>'
}
});
</script>
</html>
angular.module('app').directive('conversation', function() {
return {
restrict: 'E',
link: function ($scope, $elm, $attr) {
$scope.$watch("some_prop", function (newValue, oldValue) {
var typeId = $attr.type-id;
// Your logic.
});
}
};
}
If You're under AngularJS 1.5.3 or newer, You should consider to move to components instead of directives. Those works very similar to directives but with some very useful additional feautures, such as $onChanges(changesObj), one of the lifecycle hook, that will be called whenever one-way bindings are updated.
app.component('conversation ', {
bindings: {
type: '@',
typeId: '='
},
controller: function() {
this.$onChanges = function(changes) {
// check if your specific property has changed
// that because $onChanges is fired whenever each property is changed from you parent ctrl
if(!!changes.typeId){
refreshYourComponent();
}
};
},
templateUrl: 'conversation .html'
});
Here's the docs for deepen into components.
참고URL : https://stackoverflow.com/questions/20856824/angular-directive-refresh-on-parameter-change
'IT TIP' 카테고리의 다른 글
| WeakHashMap은 있지만 WeakSet은없는 이유는 무엇입니까? (0) | 2020.10.26 |
|---|---|
| Chrome JavaScript 디버깅-페이지 새로 고침 또는 코드를 통한 중단 사이에 중단 점을 저장하는 방법은 무엇입니까? (0) | 2020.10.26 |
| Spring Boot 및 MongoDB에 대한 연결 세부 정보를 구성하는 방법은 무엇입니까? (0) | 2020.10.26 |
| C # 컴파일러에서 빈 열거 형을 허용하는 이유는 무엇입니까? (0) | 2020.10.26 |
| Swagger 상속 및 구성 (0) | 2020.10.26 |