AngularJS之指令中controller与link(十二)

前言

在指令中存在controller和link属性,对这两者心生有点疑问,因而找了资料学习下。api

话题

首先咱们来看看代码再来分析分析。app

第一次尝试

页面:函数

    <custom-directive></custom-directive>

脚本:学习

angular
    .module('app',[])
    .directive('customDirective', customDirective);

function customDirective() {
    var directive = {
        restrict: 'EA',
        template: '<div>{{vm.test}}</div>',
        link: function(){},
        controller: directiveController,
        controllerAs: 'vm'
    };

    return directive;
}

function directiveController() {
    var vm = this;
    vm.test = "I'm from Controller";
}

 

【注】:基础仍是很是重要,页面上为custom-directive,在脚本我写成customdirective时死都没出效果,改为customDirective才好使。this

第二次尝试

页面自定义指令不变,咱们就修改下脚本:spa

angular
    .module('app',[])
    .directive('customDirective', customDirective);

function customDirective() {
    var directive = {
        restrict: 'EA',
        template: '<div>{{test}}</div>',
        link: directiveLink
    };

    return directive;
}


function directiveLink(scope,elem,attr) {
    scope.test = "I'm from Link";
}

到这里,咱们不只要开始思索:指令中的controller和link均可以实现一样的效果,那在指令中放这两个属性干吗?咱们的代码究竟是放在controller仍是link中?rest

咱们首先来看看当两者一块儿使用时,呈现结果的顺序即在编译先后生成的顺序。code

controller和link编译顺序

咱们将脚本进行修改以下:blog

angular
    .module('app',[])
    .directive('customDirective', customDirective);

function customDirective() {
    var directive = {
        restrict: 'EA',
        template: '<div>xpy0928{{test}}</div>',
        link: directiveLink,
        controller:directiveController
    };

    return directive;
}

function directiveController($scope){
    $scope.test = " from contrller cnblogs";
}

function directiveLink(scope,elem,attr) {
    scope.test = scope.test + ",and from link cnblogs";
}

生成以下:element

咱们由此得出结论:编译以前执行控制器(controller),编译以后执行连接(link)。

可是咱们还未从根本上解决问题,在controller和link应该放哪些代码?咱们接下来再看一个例子:

var app = angular.module('app',[]);
    
app.directive('customDirective', customDirective);

function customDirective() {
    var directive = {
        restrict: 'EA',
        template: '<child-directive><child-directive>',
       controller: function($scope, $element) {
            $element.find('span').text('hello cnblogs!'); }
    };

    return directive;
}
app.directive("childDirective",childDirective);

function childDirective() {
    var directive = {
        restrict: 'EA',
        template: '<h1>hello xpy0928</h1>',
        replace: true,
        link: function($scope, $element, attr) {
            
            $element.replaceWith(angular.element('<span>' + $element.text() + '</span>'));
        }
    }
    return directive;
}

此时结果应该仍是hello xpy0928仍是hello cnblogs呢?咱们看下结果:

咱们再来将如上进行修改看看:

var app = angular.module('app',[]);
    
app.directive('customDirective', customDirective);

function customDirective() {
    var directive = {
        restrict: 'EA',
        template: '<child-directive><child-directive>',
       link: function(scope, el) {
            el.find('span').text('hello cnblogs!'); }
    };

    return directive;
}
app.directive("childDirective",childDirective);

function childDirective() {
    var directive = {
        restrict: 'EA',
        template: '<h1>hello xpy0928</h1>',
        replace: true,
        link: function($scope, $element, attr) {
            
            $element.replaceWith(angular.element('<span>' + $element.text() + '</span>'));
        }
    }
    return directive;
}

为何会出现如此状况?由于在controller函数中此时全部child-directive指令中的link函数还未运行因此此时替换无效。

由此咱们能够基本得出在controller和link中应该写什么代码的结论:

(1)在controller写业务逻辑(咱们明白业务逻辑大部分是放在服务中),这里所说的业务逻辑乃是为呈现视图以前而准备的数据或者是与其余指令进行数据交互而暴露这个api。

(2)在link中主要操做DOM。

总结

指令乃是AngularJS中比较重要的一块,里面涉及到的东西也是很是之多,时不时的去往里面去灌东西,慢慢就会驾轻就熟。

相关文章
相关标签/搜索