频道栏目
首页 > 资讯 > HTML/CSS > 正文

指令与控制器之间的交互

17-06-29        来源:[db:作者]  
收藏   我要投稿

1、指令与控制器交互

<div ng-controller="MyCtrl">
    <loader>滑动加载</loader>
</div>


 

angular.module("MyCtrl",[])
.controller("myCtrl",["$scope",function(){
    $scope.loadData = function(){
        console.log("数据加载中");
    }
}])
.directive("loader",function(){
    return {
        restrict:"AE",
        link:function(scope,element,attr){
            element.bind("mouseenter",function(){
                scope.loadData();
                //scope.$apply("loadData()");
            })
        }
    }
});

 

$apply 方法传播 Model 的变化,用来刷新模型视图

2、指令与多个控制器进行交互

<div ng-controller="myCtrl">
    <loader howToLoad="loadData()">滑动加载</loader>
</div>
<div ng-controller="myCtrl2">
    <loader howToLoad="loadData2()">滑动加载</loader>
</div>


 

angular.module("MyCtrl",[])
.controller("myCtrl",["$scope",function(){
    $scope.loadData = function(){
        console.log("数据加载中");
    }
}])
.controller("myCtrl2",["$scope",function(){
    $scope.loadData2 = function(){
        console.log("数据加载中2");
    }
}])
.directive("loader",function(){
    return {
        restrict:"AE",
        link:function(scope,element,attr){
            element.bind("mouseenter",function(){
                scope.$apply(attr.howtoload);
            })
        }
    }
});

注意,html中使用驼峰命名的时候,在directive中要使用小写

3、指令与指令之间进行交互

<div class="row">
        <div class="col-md-3">
            <superman strength>动感超人---力量</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed>动感超人2---力量+敏捷</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
        </div>
    </div>


 

var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
    return {
        scope: {},//创建独立作用域
        restrict: 'AE',
        //指令内部控制器,暴露一组public函数,给外部调用
        controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
            this.addSpeed = function() {
                $scope.abilities.push("speed");
            };
            this.addLight = function() {
                $scope.abilities.push("light");
            };
        },
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
});
myModule.directive("strength", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {//第四个参数为父控制器
            supermanCtrl.addStrength();
        }
    }
});
myModule.directive("speed", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addSpeed();
        }
    }
});
myModule.directive("light", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addLight();
        }
    }
});

controller中写供外部调用的方法,link处理指令内部事务

相关TAG标签
上一篇:css实战之css画图
下一篇:AngularJS-项目结构
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站