jquery函數轉為angular指令實現樣本，jqueryangular

jquery函數轉為angular指令實現樣本，jqueryangular

   最初像想要實現的是：顯示如下的小星星

      

   最初的實現方式是在html頁面加JS指令碼，但是老外不喜歡這樣，一定要我們轉為angular指令，所以就試試唄~

一、最初的實現方式

<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport"><title>jquery評分外掛程式jquery.raty</title><link type="text/css" rel="stylesheet" href="demo/css/application.css"><script type="text/javascript" src="demo/js/jquery.min.js"></script><script type="text/javascript" src="lib/jquery.raty.min.js"></script></head><body><div style="width:500px; margin:100px auto;">    <div id="function-demo1" class="target-demo"></div></div><script type="text/javascript">    $(function() {      $.fn.raty.defaults.path = 'lib/img';         $('#function-demo1').raty({  number: 5,//多少個星星設定score: 3,//初始值是設定targetType: 'number',//類型選擇，number是數字值，hint，是設定的數組值        path      : 'demo/img',        cancelOff : 'cancel-off-big.png',        cancelOn  : 'cancel-on-big.png',        size      : 24,        starHalf  : 'star-half-big.png',        starOff   : 'star-off-big.png',        starOn    : 'star-on-big.png',                cancel    : false,        targetKeep: true,        precision : false,//是否包含小數             });        });    </script>

二、改成angular指令形式（使用了requireJS）

    說明：我這裡使用了第三方的外掛程式jquery.raty.min.js（評分外掛程式），它是要依賴於jquery的。

    directive.js

//starsdefine([ 'angular','raty' ], function(angular) {        var directives = angular.module('directives', []);    directives.directive('showStars', function() {        return {            restrict : 'A',            controller : [ '$scope', '$element', '$timeout', function($scope, $element, $timeout) {                $timeout(function() {                                        $.fn.raty.defaults.path = 'img';                                        $($element).raty({                        number : 5,                        score : 3,                        half : false,                        size : 30                    });                }, 100);            } ]        };    });    return directives;});

三、RequireJS中一般都有個main.js的檔案作為啟動點，這裡也不例外

      main.js

//配置依賴require.config({    paths: {      "angular":"angular",      "jquery":"jquery.min",      "raty":"jquery.raty.min"    },    shim:{        "angular": {            "deps":[],            "exports": "angular"        },        "jquery":{            "deps":[],            "exports": "jquery"        },        "raty":{            "deps":["jquery"],            "exports": "raty"        }    }  });//手動啟動對應模組require([ 'angular', 'controller', 'directive' ], function(angular) {    angular.bootstrap(document, [ 'HelloCtrls', 'directives']); });

   注意：在這裡我使用的是手動啟動的方式，html頁面中去掉ng-app指令 ,改為自動啟動如下：

   

define([        'angular',        'controller',        'directive'        ], function (angular) {                  angular.module('HelloModel', ['HelloCtrls','directives']);        return {            angularModules: [ 'HelloModel' ]        };                });

     但，不幸的是，改為自啟動的時候總是說無法執行個體化HelloModel（頁面中我加了ng-app="HelloModel"）我懷疑是js檔案的載入順序，但是後來發現麼有什麼問題啊，特別糾結,現在仍然未能解決，如果有人能告訴我原因不勝感激！

 

四、頁面中使用上述自訂指令

     index.js

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="js/require.js" data-main="js/main" defer async="true" ></script></head><body ng-controller="helloCtrl">{{greet}}<div show-stars ></div></body></html>

五、說明

   上述的控制器與該指令無關，我就是測試用的，當然還是貼出來好些。

     controller.js

define([ 'angular' ], function(angular) {    var componentCtrls = angular.module('HelloCtrls', []);     componentCtrls.controller('helloCtrl', [ '$scope',function($scope) {        $scope.greet = "hello world";      } ]);    return componentCtrls;});

  難道是使用了第三方才外掛程式的緣故就只能改為手動啟動嗎？求解。。。。