只需一步，快速开始
查看: 1082|回复: 15
在线时间 小时
签到天数: 105 天连续签到: 0 天[LV.6]经理
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
怎样合并js，是将代码放在一起吗？
a. 回帖是一种美德，也是对楼主发帖的尊重和支持;
&&&&如果通过本帖信息与他人联系，请说明来自推一把论坛！推一把微信公众号：tui18com
b. 请不要发表违反中华人民共和国法律的内容。本站所有帖子属会员个人意见，与本站立场无关.
&&&&帖子内容版权归属作者所有,如是转贴版权归属原作者所有，其他单位或个人在使用或转载帖子&&&&内容时须征得帖子作者的同意或注明内容原出处。
在线时间 小时
签到天数: 36 天连续签到: 0 天[LV.5]主管
额，不知道，坐等da安……
在线时间 小时
签到天数: 42 天连续签到: 0 天[LV.5]主管
{:soso__:}
阅读权限60
在线时间 小时
签到天数: 9 天连续签到: 0 天[LV.3]优秀员工
你说的很对啊。。
阅读权限80
在线时间 小时
签到天数: 251 天连续签到: 1 天[LV.8]总经理
合并js，就是将页面中js代码集中写到新建的.js文件中，这样可以提高网站代码友好度，为页面减肥。
阅读权限70
在线时间 小时
签到天数: 81 天连续签到: 1 天[LV.6]经理
我也不懂···
在线时间 小时
签到天数: 143 天连续签到: 0 天[LV.7]总监
我也向知道呢
在线时间 小时
签到天数: 458 天连续签到: 1 天[LV.9]CEO
提示: 作者被禁止或删除 内容自动屏蔽
阅读权限70
在线时间 小时
签到天数: 53 天连续签到: 0 天[LV.5]主管
为什么要合并JS代码呢！
阅读权限70
在线时间 小时
签到天数: 81 天连续签到: 1 天[LV.6]经理
合并js是必需的，要不然造成网站访问特别慢，另外蜘蛛也不识别。网页设计师要注意的。
推一把推荐 /1
新机遇新未来
2006年点石互动
开启了中国SEO的梦想之门
10年过去了
SEM、SEO、SMO、ASO
不断演变创新突破
价值与定位 整合与规划
我们从未停止过探索与努力
2016MADCon再度扬帆起航
拥抱新机遇 开创新未来
推一把微信公众号：tui18com||京公网安备
论坛事务(9:30-17:00)：
|广告合作(9:30-17:00)：
承载数据运行（|）指令&AngularJs&
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法：angular.module('myApp', []) .directive('myDirective', function() {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示： function(tElement, tAttrs, transclude) {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
return function postLink(...) { ... }
};});restrict[string] restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。 可选值如下： E（元素）&my-directive&&/my-directive&A（属性，默认值）&div my-directive=&expression&&&/div&C（类名）&div class=&my-directive:&&&/div&M（注释）&--directive:my-directive expression--&
一般考虑到浏览器的兼容性，强烈建议使用默认的属性就可以即即以属性的形式来进行声明。最后一种方式建议再不要求逼格指数的时候千万不要用。 Code:angular.module('app',[]).directive('myDirective', function () {return { restrict: 'E', template: '&a href=&&&百度&/a&' };})HtmlCode: &my-directive&&/my-directive& &效果：
priority[int] 大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。 terminal[bool]
这个参数用来 停止运行当前元素上比本指令优先级低的指令 。但同当前指令优先级相同的指令还是会被执行。
例如：ngIf的优先级略高于ngView（它们操控的实际就是 terminal参数 ），如果ngIf的表达式值为true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先级较低就不会被执行。 template[string or function]template参数是可选的，必须被设置为以下两种形式之一： &一段HTML文本； 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。首先演示下第二种用法：angular.module('app',[]) .directive('myDirective', function () {
restrict: 'EAC',
template: function (elem, attr) {
return &&a href='& + attr.value + &'&& + attr.text + &&/a&&;
}; })HtmlCode:（效果同上，不做演示了）&my-directive value=&& text=&百度&&&/my-directive&&div my-directive value=&&text=&百度&&&/div&templateUrl[string or function]templateUrl是可选的参数，可以是以下类型： 一个代表外部HTML文件路径的字符串； 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。无论哪种方式，模板的URL都将通过ng内置的安全层，特别是$getTrustedResourceUrl，这样可以保护模板不会被不信任的源加载。 默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟，可以在部署应用之前对HTML模板进行缓存。Code:angular.module('app',[]) .directive('myDirective', function () {
restrict: 'AEC',
templateUrl: function (elem, attr) {
return attr.value + &.html&;//当然这里我们可以直接指定路径，同时在模板中可以包含表达式
}; })replace[bool] replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部, 例如上面的示例默认值情况下，生成的html代码如下： &my-directive value=&& text=&百度&&&a href=&&&百度&/a&&/my-directive&如果设置replace=true&a href=&& value=&& text=&百度&&百度&/a&据我观察，这种效果只有设置restrict=&E&的情况下，才会表现出实际效果。
介绍完基本的指令参数后，就要涉及到更重要的作用域参数了... scope参数[bool or object]scope参数是可选的，可以被设置为true或一个对象。默认值是false。
一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域
。因此，对于这些对象来说scope默认被设置为true。内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。这里的继承就不在赘述，和面向对象中的继承基本是一直的。
首先我们来分析一段代码：&div ng-app=&app& ng-init=&name= '祖父'&&
&div ng-init=&name='父亲'&&
第一代：{{ name }}
&div ng-init=&name= '儿子'& ng-controller=&SomeController&&
第二代： {{ name }}
&div ng-init=&name='孙子'&&
第三代： {{ name }}
&/div&我们发现第一代，我们初始化name为父亲,但是第二代和第三代其实是一个作用域，那么他们的name其实是一个对象，因此出现的效果如下：第一代：父亲第二代： 孙子第三代： 孙子我们在修改一下代码，把第三代隔离开来再看看效果：&div ng-app=&app&ng-init=&name= '祖父'&&
&div ng-init=&name='父亲'&&
第一代：{{ name }}
&div ng-init=&name= '儿子'& ng-controller=&SomeController&&
第二代： {{ name }}
&div ng-init=&name='孙子'& ng-controller=&SecondController&&
第三代： {{ name }}
&/div&JsCode:angular.module('app', []).controller('SomeController',function($scope) {}) .controller('SecondController', function ($scope) {}) 效果如下：第一代：父亲第二代： 儿子第三代： 孙子在修改下代码来看看继承：
&div ng-app=&app&ng-init=&name= '祖父的吻'&&
第一代：{{ name }}
&div ng-controller=&SomeController&&
第二代： {{ name }}
&divng-controller=&SecondController&&
第三代： {{ name }}
&/div&效果如下：第一代：祖父的吻第二代： 祖父的吻第三代： 祖父的吻
如果要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true，简单来说就是可继承的隔离，即不能反向影响父作用域。 再来看个例子：angular.module('myApp', [])
.controller('MainController', function ($scope) {
.directive('myDirective', function () {
restrict: 'A',
scope:false,//切换为{}，true测试
priority: 100,
template: '&div&内部:{{ myProperty }}&input ng-model=&myProperty&/&&/div&'
});Html代码：&div ng-controller='MainController' ng-init=&myProperty='Hello World!'&&外部: {{ myProperty}}&input ng-model=&myProperty& /&&div my-directive&&/div&&/div&当我们改变scope的值我们会发现 false: 继承但不隔离
true: 继承并隔离
{}： 隔离且不继承&
transclude transclude是一个可选的参数。默认值是false。嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。我们可以将整个模板，包括其中的指令通过嵌入全部传入一个指令中。 指令的内部可以访问外部指令的作用域，并且模板也可以访问外部的作用域对象 。为了将作用域传递进去，scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数，那么指令内部的作用域将被设置为传入模板的作用域。
只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。 我们来看两个例子-导航栏：&div side-box title=&TagCloud&&
&div class=&tagcloud&&
&a href=&&&Graphics&/a&
&a href=&&&ng&/a&
&a href=&&&D3&/a&
&a href=&&&Front-end&/a&
&a href=&&&Startup&/a&
&/div& &/div&JsCode:angular.module('myApp', []).directive('sideBox', function() {
restrict: 'EA',
title: '@'
transclude: true,
template: '&div class=&sidebox&&&div class=&content&&&h2 class=&header&&' +
'{{ title }}&/h2&&span class=&content& ng-transclude&&/span&&/div&&/div&'
}); 这段代码告诉ng编译器，将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方。再来你看个官网的例子：angular.module('docsIsoFnBindExample', []).controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {$scope.name = 'Tobias';$scope.hideDialog = function () {$scope.dialogIsHidden = true;$timeout(function () {$scope.dialogIsHidden = false;}, 2000);};}]).directive('myDialog', function() {return {restrict: 'E',transclude: true,scope: {'close': '&onClose'},templateUrl: 'my-dialog-close.html'};});my-dialog-close.html&div class=&alert&&&a href class=&close& ng-click=&close()&&&&/a&&div ng-transclude&&/div&&/div&index.html&div ng-controller=&Controller&&&my-dialog ng-hide=&dialogIsHidden& on-close=&hideDialog()&&Check out the contents, {{name}}!&/my-dialog&&/div&
如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。 controller[string or function]controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.angular.module('myApp', []) .directive('myDirective', function() { restrict: 'A',controller: 'SomeController' }) 可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器angular.module('myApp',[]) .directive('myDirective', function() { restrict: 'A', controller: function($scope, $element, $attrs, $transclude) { // 控制器逻辑放在这里} }); 我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有： 1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
由当前元素的属性组成的对象。&&div id=&aDiv&class=&box&&&/div&具有如下的属性对象：{ id: &aDiv&, class: &box& }
4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。angular.module('myApp',[]) .directive('myLink', function () {
restrict: 'EA',
transclude: true,
controller:
function ($scope, $element,$attrs,$transclude) {
$transclude(function (clone) {
var a = angular.element('&a&');
a.attr('href', $attrs.value);
a.text(clone.text());
$element.append(a);
}; });html&my-link value=&&&百度&/my-link&&div my-link value=&&&谷歌&/div&
仅在compile参数中使用transcludeFn是推荐的做法。
link函数可以将指令互相隔离开来，而controller则定义可复用的行为
。如果我们希望将当前指令的API暴露给其他指令使用，可以使用controller参数，否则可以使用link来构造当前指令元素的功能性（即内部功能）。如果我们使用了
scope.$watch()或者想要与DOM元素做实时的交互，使用链接会是更好的选 择
。使用了嵌入，控制器中的作用域所反映的作用域可能与我们所期望的不一样，这种情况下，$scope对象无法保证可以被正常更新。当想要同当前屏幕上的作用域交互时，可以使用传入到link函数中的scope参数。
controllerAs[string]controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。&div ng-controller=&MainController as main&&&input type=&text& ng-model=&main.name& /&&span&{{ main.name }}&/span&&/div&JsCode:angular.module('myApp',[]) .controller('MainController', function () { this.name = &Halower&; });
控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。 require[string or string[]] &require 为字符串代表另外一个指令的名字。
require会将控制器注入到其所指定的指令中，并作为当前指令的链接函数的 第四个参数
。字符串或数组元素的值是
会在当前指令的作用域中使用的指令名称
。在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。
如果不使用^前缀，指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=&& 如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。 如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。 &如果添加了?^&将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找 如果没有任何前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误
未完待续.... 备注：我也是刚刚开始学习，如果你喜欢本文的话，
最新教程周点击榜
微信扫一扫Fost &amp； Kyte 广告-高清观看-腾讯视频
Fost &amp； Kyte 广告
上传者其它视频
扫描二维码随身看视频
用手机或平板摄像头拍下右侧的二维码，您可以：
1 在手机或平板上继续观看该视频
2 分享给你的微信好友或者朋友圈
视频上传者
上传视频数4
好莱坞影院推荐
史上最美礼服梦幻来袭
蓝胖子的深情告白
下载企鹅看看
好莱坞会员