controller directive 数据传输

最新推荐文章于 2021-06-09 17:24:10 发布

原创最新推荐文章于 2021-06-09 17:24:10 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #controller #directive

angularjs 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在AngularJS中利用自定义指令与控制器交互，通过鼠标悬停触发不同控制器中的方法，实现动态加载数据的功能，并展示了如何传递方法名称作为属性。

html 代码片段

<body>
    <div ng-controller="boxController">
      <box>滑动加载</box>
    </div>
  </body>

controller 代码片段

boxApp.controller('boxController', ['$scope',function($scope) {	  
	  $scope.loadData = function(){
	   		console.log("数据加载中。。。。");
	  };
	}]);

directive 代码片段

boxApp.directive("box", ["$timeout",function($timeout) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.bind('mouseenter', function() { 
                // scope.loadData();
                 scope.$apply("loadData()");
            });
   }; 
}]);

这个地方，不能用独立scope，否则会报错，不能找到指定的函数

directive在不同controller中使用，假如有 boxController2，如何根据不同的controller调用不同的方法，需要给directive定义属性

此页面定义了howToLoad属性

html代码片段

    <div ng-controller="bomController">
      <bom  howToLoad="loadData()"></bom>
    </div>

    <div ng-controller="bomController2">
      <bom howToLoad="loadData2()"></bom>
    </div>

controller 代码片段

boxApp.controller('boxController', ['$scope',function($scope) {
	  $scope.loadData = function(){
	   		console.log("数据加载中。。。。");
	  };
	}]);

boxApp.controller('boxController2', ['$scope',function($scope) {
	  $scope.loadData2 = function(){
	   		console.log("数据加载中2222。。。。");
  };
}]);

directive 代码片段

boxApp.directive("box", ["$timeout",function($timeout) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.bind('mouseenter', function() { 
                // scope.loadData();
                 scope.$apply(attrs.howtoload);
            });
   }; 
}]);

directive 代码需要注意 attrs.howtoload 要全部小写，如果在html中按照驼峰法则howToLoad来写的话，为了避免错误，可以全部采用小写的格式，不要忘记atrrs，不要加括号。

结果