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

前言

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

话题

首先我们来看看代码再来分析分析。

第一次尝试

页面:

    <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才好使。

第二次尝试

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

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中?

我们首先来看看当二者一起使用时,呈现结果的顺序即在编译前后生成的顺序。

controller和link编译顺序

我们将脚本进行修改如下:

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";
}

生成如下:

我们由此得出结论:编译之前执行控制器(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中比较重要的一块,里面涉及到的东西也是非常之多,时不时的去往里面去灌东西,慢慢就会得心应手。

时间: 2024-09-19 07:16:22

AngularJS之指令中controller与link(十二)的相关文章

总结Spring中XML配置的十二个最佳实践

Spring是一个强大的JAVA应用框架,广泛地应用于JAVA的应用程序.为PlainOldJavaObjects(POJOs)提供企业级服务.Spring利用依赖注入机制来简化工作,同时提高易测性.Springbeans及依赖,以及beans类所需的服务都在配置文件中进行了详细的说明,这个配置文件是典型的XML格式.但是它既冗长又不实用.对于需要定义大量Springbeans的大工程来说,我们难以阅读和管理它. 在这篇文章里,对于SpringXML的配置,我将向你展示12种比较好的实践.其中的

学习AngularJs:Directive指令用法(完整版)_AngularJS

本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope.绑定事件.更改样式等.通过这个Directiv

AngularJs 指令directive之controller,link,compile

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词.如:定义myDirective,使用时 像这样:<my-directive>. 这里列出directive的合法命名: ng:bind ng-bind ng_bind x-ng-bind data-ng-bind 我是教师,在新建试题输入分数的时候

[译]ng指令中的compile与link函数解析

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用

AngularJS指令中的绑定策略实例分析_AngularJS

本文实例讲述了AngularJS指令中的绑定策略.分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略. 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 <test word="{{wordCtrl}}"></test> app.controller('myCon

Angularjs中controller的三种写法分享_AngularJS

前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

link中如何产生整十数的随机整数?如何固定一个随机整数?

问题描述 link中如何产生整十数的随机整数?如何固定一个随机整数? link中如何产生整十数的随机整数?如何固定一个随机整数? 解决方案 产生整数的随机数,然后乘以10 或者产生随机数,然后%10取整

AngularJS Slider指令(directive)扩展

继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展.如 果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架,Angular-Bootstrap和Compiler以及Google-AngularJS 官方文档. jsfiddle演示:http://jsfiddle.net/whitewolf/vNfsm/20/embedded/: html:

AngularJS封装指令方法详解_AngularJS

本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需