Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드
- 黄舟원래의
- 2017-06-01 09:34:421064검색
이 글에서는 controller와 angularjs 간의 상호 작용을 구현하는 방법에 대한 자세한 설명을 주로 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
다음 DOM 구조가 있는 경우:
<p ng-controller="MyCtrl"> <loader>滑动加载</loader> </p>
동시에 우리 컨트롤러에는 다음과 같은 서명이 있습니다.
var myModule = angular.module("MyModule", []);
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);동시에 명령어의 서명은 다음과 같습니다.
myModule.directive("loader", function() {
return {
restrict:"AE",//Element,Attribute
link:function(scope,element,attrs){
element.bind('mouseenter', function(event) {
//scope.loadData();
// scope.$apply("loadData()");
// 注意这里的坑，howToLoad会被转换成小写的howtoload
});
}
}
});이 때 우리 명령어는 범위를 통해 컨트롤러에 대한 호출을 완료할 수 있습니다. .loadData 또는 범위.$apply . 그런데 두 개의 컨트롤러가 있고 $scope의 메서드가 두 컨트롤러에서 서로 다르다면 어떨까요?
var myModule = angular.module("MyModule", []);
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);
myModule.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("加载数据中...22222");
}
}]);이때 지침에서 메서드를 어떻게 호출해야 할까요? 위의 메서드를 따르면 문제가 발생합니다: MyCtrl2 loadData는 없고 loadData2만 있습니다. 이때 다음 지침을 사용하여 속성을 사용자 정의해야 합니다!
우리는 두 개의 컨트롤러 컨트롤러, 즉 MyCtrl과 MyCtrl2를 정의했습니다. 두 컨트롤러 모두 자체 정의된 명령어를 사용합니다. load:
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<!--第一个控制器MyCtrl-->
<p ng-controller="MyCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</p>
<!--第二个控制器MyCtrl2-->
<p ng-controller="MyCtrl2">
<loader howToLoad="loadData2()">滑动加载</loader>
</p>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="Directive&Controller.js"></script>
</html>다음과 같이 컨트롤러 코드를 사용자 정의했습니다.
var myModule = angular.module("MyModule", []);
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);
myModule.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("加载数据中...22222");
}
}]);
//在模块下挂载一个loader指令
myModule.directive("loader", function() {
return {
restrict:"AE",//Element,Attribute
link:function(scope,element,attrs){
element.bind('mouseenter', function(event) {
//scope.loadData();
// scope.$apply("loadData()");
// 注意这里的坑，howToLoad会被转换成小写的howtoload
// scope.$apply(attrs.howtoload);
//其中scope为POJO，但是有一系列的工具方法如$watch,$apply等
});
}
}
});분명히 여기에는 MyCtrl과 MyCtrl2라는 두 개의 컨트롤러가 있습니다. 이때 명령어는 어떤 컨트롤러를 호출해야 하는지 어떻게 알 수 있나요? , 그리고 이 속성을 사용하여 다양한 컨트롤러 호출을 판단하므로 명령어가 다른 컨트롤러에서 호출될 수 있습니다!
요약: 명령어가 정의된 이유는 명령이 다른 컨트롤러와 상호 작용할 수 있도록 하기 위한 것입니다. 명령에 대한 구성 항목이 정의됩니다. 이것이 명령과 컨트롤러 간의 데이터 상호 작용의 원리입니다!
위 내용은 Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!