controller와 명령 통신 방법
7526 단어 controller
그들은 각자의 $scope를 가지고 있기 때문에 $scope를 뛰어넘는 호출에 문제가 생겼다.
몇 가지 흔히 볼 수 있는 방법으로 사용할 수 있다.
방법1: 명령 Require
<div directive1="xx">
<div directive2></div>
</div>
directive("directive1", [function () {
return {
restrict: "A",
link: function () { },
scope: true,
controller: ["$scope", function ($scope) {
this.alert = function () {
$scope.name = "100"
}
}],
name: "directive1Controller"
}
}]).
directive("directive2", [function () {
return {
restrict: "E",
require: "^directive1Controller", // controller
link: function (scope, elem, attrs, directive1Controller) {
directive1Controller.alert(); //
}
}
}]).
명령은 Require를 통해 다른 명령어 컨트롤러를 호출하여 통신에 도달합니다
방법2: 서비스
service("sharing", [function () {
this.data = "";
}]).
controller("ctrl", ["$scope", "sharing", function ($scope, sharing) {
$scope.updateData = function () {
sharing.data = "new value";
}
}]).
directive("directive1", ["sharing", function (sharing) {
return {
restrict: "A",
link: function (scope) {
scope.$watch(function () {
return sharing.data;
}, function () {
scope.name = sharing.data;
});
}
}
}]).
모듈 간 통신을 하려면 서비스로 인터페이스를 제공하는 것이 좋습니다. 서비스와 컨트롤러는 $watch를 통해 $scope를 업데이트할 수 있습니다.
$watch가 단점이 있어서 메모리 소모가 많아요.
방법 3: 이벤트
controller("ctrl", ["$scope", "sharing", "$rootScope", function ($scope, sharing, $rootScope) {
$scope.updateData = function () {
$rootScope.$broadcast("sharingChange", "new value");
//$emit
//$broadcast
}
}]).
directive("directive1", ["sharing", function (sharing) {
return {
restrict: "A",
link: function (scope) {
scope.$on("sharingChange", function (e, newValue) {
scope.name = newValue;
});
}
}
}]).
이것은 비교적 공식적인 방법이다.
요약:
서브층과 부층 통신, 계승된 $scope, 명령의 Require, 이벤트 방송 많이 사용
모듈 간의 통신은 서비스 제공 인터페이스를 사용하면 쉽게 볼 수 있습니다. 서비스와 controller 명령 간의 통신은watch, $on 또는 전역 변수를 사용할 수 있습니다. (모듈 내의 전역, 너무 많이 사용하지 마세요)
서비스 인터페이스는 좋지만 지령의 복용성이 높기 때문에 모든 조작이 인터페이스를 열면 곧 인터페이스가 많아지기 때문에 인터페이스가 복용성이 높음을 확보해야 한다. 만약에 특정한 개발에 맞추기 위해 인터페이스를 열면 가치가 없다.
$rootScope.$broadcast("Main.myParent.alert", function ($scope) { // , ( , $scope)
$scope.name = "keatkeat"
});
$scope.$on("Main.myParent.alert", function (e, fn) { //
fn($scope); // $scope , $scope
});
우리는 복용성이 높지 않은 조작을 바깥에 쓸 수 있다. 이렇게 하면 너무 많은 인터페이스를 쓰지 않아도 된다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
iOS open source project: DYNavigationControllerDYNavigationController is a project that implements left and right sliding navigation. First initialize DYNavigationCont...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.