###1、在angularjs使用route時,若想在一個單獨路由頁面使用一個單獨js文件,能夠使用如下方法:html
一、scriptjs: (function (name, context, definition) { if (typeof module != 'undefined' && module.exports) module.exports = definition() else if (typeof define == 'function' && define.amd) define(definition) else context[name] = definition() })('$script', this, function() { var doc = document , head = doc.getElementsByTagName('head')[0] , validBase = /^https?:\/\// , list = {}, ids = {}, delay = {}, scriptpath , scripts = {}, s = 'string', f = false , push = 'push', domContentLoaded = 'DOMContentLoaded', readyState = 'readyState' , addEventListener = 'addEventListener', onreadystatechange = 'onreadystatechange' function every(ar, fn) { for (var i = 0, j = ar.length; i < j; ++i) if (!fn(ar[i])) return f return 1 } function each(ar, fn) { every(ar, function(el) { return !fn(el) }) } if (!doc[readyState] && doc[addEventListener]) { doc[addEventListener](domContentLoaded, function fn() { doc.removeEventListener(domContentLoaded, fn, f) doc[readyState] = 'complete' }, f) doc[readyState] = 'loading' } function $script(paths, idOrDone, optDone) { paths = paths[push] ? paths : [paths] var idOrDoneIsDone = idOrDone && idOrDone.call , done = idOrDoneIsDone ? idOrDone : optDone , id = idOrDoneIsDone ? paths.join('') : idOrDone , queue = paths.length function loopFn(item) { return item.call ? item() : list[item] } function callback() { if (!--queue) { list[id] = 1 done && done() for (var dset in delay) { every(dset.split('|'), loopFn) && !each(delay[dset], loopFn) && (delay[dset] = []) } } } setTimeout(function () { each(paths, function (path) { if (path === null) return callback() if (scripts[path]) { id && (ids[id] = 1) return scripts[path] == 2 && callback() } scripts[path] = 1 id && (ids[id] = 1) create(!validBase.test(path) && scriptpath ? scriptpath + path + '.js' : path, callback) }) }, 0) return $script } function create(path, fn) { var el = doc.createElement('script') , loaded = f el.onload = el.onerror = el[onreadystatechange] = function () { if ((el[readyState] && !(/^c|loade/.test(el[readyState]))) || loaded) return; el.onload = el[onreadystatechange] = null loaded = 1 scripts[path] = 2 fn() } el.async = 1 el.src = path head.insertBefore(el, head.lastChild) } $script.get = create $script.order = function (scripts, id, done) { (function callback(s) { s = scripts.shift() if (!scripts.length) $script(s, id, done) else $script(s, callback) }()) } $script.path = function (p) { scriptpath = p } $script.ready = function (deps, ready, req) { deps = deps[push] ? deps : [deps] var missing = []; !each(deps, function (dep) { list[dep] || missing[push](dep); }) && every(deps, function (dep) {return list[dep]}) ? ready() : !function (key) { delay[key] = delay[key] || [] delay[key][push](ready) req && req(missing) }(deps.join('|')) return $script } $script.done = function (idOrDone) { $script([null], idOrDone) } return $script });
並將scriptjs.js加入主頁header中。jquery
二、在每一個路由中添加額外js文件: var app = angular.module('app', [ 'ngRoute', 'ngAnimate' 'ngSanitize', 'ngDragDrop' ]) .config(function ($routeProvider, $compileProvider ,$controllerProvider) { app.registerCtrl = $controllerProvider.register; app.resolveScriptDeps = function(dependencies){ return function($q,$rootScope){ var deferred = $q.defer(); $script(dependencies, function() { // all dependencies have now been loaded by $script.js so resolve the promise $rootScope.$apply(function() { deferred.resolve(); }); }); return deferred.promise; } }; $routeProvider .when('/login', { controller: 'LoginCtrl', templateUrl: 'content/views/login.html', publicAccess: true }) .when('/article/edit/:id', { controller: 'EditArticleCtrl', templateUrl: 'content/views/editArticle.html', resolve: { deps: app.resolveScriptDeps([ 'js/jquery.zclip.min.js', 'yourjs2.js' ]) } })
此後,當你打開editArticle.html時,將會自動在header後面添加jquery.zclip.min.js、yourjs2.js文件。angularjs
###2、在angularjs中使用jquery插件時,最好使用directive而不是直接在controller中使用,如使用 uploadify進行文件上傳,可兼容IE8及以上版本:promise
<pre><code> html: <input name="file" class="btn" type="file" id="head_upload" value="上傳頭像" upload-Img/> angularjs app.js: 經過路由,額外添加js文件: var app = angular.module('app', [ 'ngRoute', 'ngAnimate' 'ngSanitize', 'ngDragDrop' ]) .config(function ($routeProvider, $compileProvider ,$controllerProvider) { app.registerCtrl = $controllerProvider.register; app.resolveScriptDeps = function(dependencies){ return function($q,$rootScope){ var deferred = $q.defer(); $script(dependencies, function() { $rootScope.$apply(function() { deferred.resolve(); }); }); return deferred.promise; } }; $routeProvider.when('/editInfo', { resolve: { deps: inoteApp.resolveScriptDeps([ 'js/swfobject.js', 'js/jquery.uploadify.v2.1.4.min.js' ]) }, controller: 'EditInfoCtrl', templateUrl: 'content/views/EditInfo.html' }) }) 爲路由添加controller: app.controller('inoteCtrl', function ($scope){ /** * 上傳圖片成功後函數 * 即下面directive中調用的scope.uploadImg(obj) */ $scope.uploadImg = function(data) { $scope.imageSrc = data.value; $('.c_left').attr('src',$scope.imageSrc); } }) 經過指令,進行添加圖片上傳功能添加: app.directive('uploadImg', function () { return { restrict: 'A', link: function(scope, element, attrs) { var timerImgUpload = setTimeout(function() { $(element).uploadify( { 'uploader': 'js/uploadify.swf', 'script': 'yoursite/Upload/Image',//接收處理頁面 'folder': '', 'queueID': 'fileQueue', 'auto': true, 'multi': false, 'buttonText': 'img-File', 'fileExt': '*.jpg;*.png;*.gif;', 'hideButton': true, 'onSelect': function (e, queueId, fileObj) { $('#index-exploreLoading').show(); }, 'fileDesc': '請選擇jpg文件', 'onComplete': function(event, queueId, fileObj, response, data) { $('#index-exploreLoading').hide(); var obj = JSON.parse(response); scope.uploadImg(obj); }, 'onError': function(event, queueId, fileObj, errorObj) { alert(errorObj.type); alert(errorObj.info); } }); clearTimeout(timerImgUpload); },10); } }; }); </code></pre>app