Angularjs 将库合并到角度视图中_Angularjs

Angularjs 将库合并到角度视图中

angularjs

Angularjs 将库合并到角度视图中,angularjs,Angularjs,我正在尝试使用这个插件，由于某种原因，当我的artistpage.html页面被打开时，星星并没有出现。我知道该页面正在被提供，因为视图中的所有其他元素都会出现。另一件奇怪的事情是，当我把放在index.html中时，插件就工作了。因此，我不确定当视图被注入时，它为什么不工作。假设我的路径是正确的，那么会出现什么问题 index.html <!doctype html> <html> <head> <script src="https://

我正在尝试使用这个插件，由于某种原因，当我的artistpage.html页面被打开时，星星并没有出现。我知道该页面正在被提供，因为视图中的所有其他元素都会出现。另一件奇怪的事情是，当我把

放在index.html中时，插件就工作了。因此，我不确定当视图被注入

时，它为什么不工作。假设我的路径是正确的，那么会出现什么问题

index.html

<!doctype html>
<html> 
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
    </script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="./lib/jquery.rateyo.css"/>
  </head>
  <body ng-app='LiveAPP'>   
    <div ng-view></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="./lib/jquery.rateyo.js"></script>
    <script src="/controllers/mainCtrl.js"></script>
    <script src="/controllers/signUpCtrl.js"></script>
    <script src="/controllers/artistCtrl.js"></script>
    <script src="/routes.js"></script> 
    <script src="./js/stars.js"></script>
  </body>
</html>

<h1>This is a title</h1>
<div id="rateYo"></div>

stars.js

angular.module('LiveAPP', ['ngRoute',
                          'LiveAPP.main',
                          'LiveAPP.signUp',
                          'LiveAPP.artist'])

.config(function($routeProvider, $httpProvider) {
$routeProvider
  .when('/', {
    templateUrl : '/home.html',
    controller  : 'mainCtrl'
  })
  .when('/signup',{
    templateUrl : '/signup.html',
    controller  : 'signUpCtrl'
  })
  .when('/artist',{
    templateUrl : '/artistpage.html',
    controller  : 'signUpCtrl'
  })

});

$(function () {
 
  $("#rateYo").rateYo({
    rating: 3.6
  });
 
});

stars.js

中的代码在文档准备就绪时进行评估，但jQuery不知道如何替换

ng view

中的视图内容，因此它不会将评级插件附加到任何新添加的元素。通常，您希望将jQuery插件包装在Angular指令中，以便以“Angular方式”使用它们。例如：

app.directive("rateYo", function() {
    return {
        restrict: "A",
        scope: {
            rating: "="
        },
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            $(ele).rateYo({
                rating: scope.rating
            });
        }
    };
});

app.directive（“rateYo”，function（））{
返回{
限制：“A”，
范围：{
评级：“=”
},
模板：“”，
链接：功能（范围、元素、属性）{
美元（ele）.rateYo({
评级：scope.rating
});
}
};
});

在您看来，以下哪种方式会像这样使用：

<!-- assuming $scope.myRating equals the rating you want to display -->
<div rate-yo rating="myRating"></div>

上面的代码未经测试，但它应该能告诉您它的要点。

我正在准备一篇评论，但事实上，您的评论非常好；）我放弃了我的+谢谢你。这个答案促使我更仔细地研究指令。一个我不太懂的话题，但现在我懂了。