jquery函数转为angular指令实现示例

文章来源：http://www.itnose.net

最初像想要实现的是：显示如下的小星星

      

 

   最初的实现方式是在html页面加JS脚本，但是老外不喜欢这样，一定要我们转为angular指令，所以就试试呗~

 

一、最初的实现方式

 

 

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

 

    说明：我这里使用了第三方的插件jquery.raty.min.js（评分插件），它是要依赖于jquery的。

 

    directive.js

 

//stars
define([ '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

 

{{greet}}

 

五、说明

 

   上述的控制器与该指令无关，我就是测试用的，当然还是贴出来好些。

 

     controller.js

 

define([ 'angular' ], function(angular) {

    var componentCtrls = angular.module('HelloCtrls', []);

     componentCtrls.controller('helloCtrl', [ '$scope',function($scope) {

        $scope.greet = "hello world";

      } ]);

    return componentCtrls;
});

  难道是使用了第三方才插件的缘故就只能改为手动启动吗？求解。。。。

 

 

 

 

更多相关文章：http://www.itnose.net/st/6252774.html