【问题标题】:angular js router and directivesAngular js 路由器和指令
【发布时间】:2012-07-24 09:55:01
【问题描述】:

我的 html 文件中有代码

<!doctype html>
<html ng-app="slider">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
  <script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.min.js"></script>
  <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
  <script src="app.js"></script>
</head>

<body>
  <div jq:slider></div>
  <input id="amount" />
    {{years}}
</body>​
</html>

而我的 app.js 就是这个

angular.module('slider',[])
.directive('jq:slider', function() {
return function(elm) {
  var currentScope = this;
  elm.slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            currentScope.years = ui.values[0];            
            currentScope.$apply();
        }
    });
};
});

由于某种原因,当我运行此代码时,出现以下错误:

Uncaught TypeError: Object # has no method 'module'

我在没有模块和外部文件的情况下尝试了相同的代码,它工作得很好......有任何线索吗?

【问题讨论】:

    标签: jquery jquery-ui angularjs


    【解决方案1】:

    Err...我认为elm.slider 是未定义的....

    【讨论】:

    • 但是它通过路由器没有通过?
    • 不,elm 是 angular.element 的一个实例,试试 $(elm[0]).slider ... 我认为你也应该更新到 angular 1.0,0.10 有点旧。如果我没记错的话,在 1.0 中,angular.element 会在加载时使用 jquery。
    • 是的,所以我更新到 angular 1.0 并重新实现了整个事情。这是回购github.com/climboid/angular-slider。感谢您的帮助!
    • 如果这回答了问题,那么您应该将问题标记为已解决以关闭它。
    猜你喜欢
    • 1970-01-01
    • 2016-06-03
    • 1970-01-01
    • 1970-01-01
    • 2016-07-25
    • 2015-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多