CODEWITHSUNDEEP
angularjs
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Incorporating a library in a view in Angular

I am trying to use this plugin http://prrashi.github.io/rateYo/ and for some reason when my artistpage.html page is served up the stars aren't appearing. I know the page is being served up because all other elements in the view appear. Something else that is strange is that when I put <div id="rateYo"></div> in the index.html the plugin works. So I am not really sure why its not working when the view is injected into <div ng-view></div>. Assuming my paths are correct, what could be the problem?

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>

artistpage.html

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

routes.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'
  })

});

stars.js

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

Upvotes: 0

Views: 101

Answers (1)

Sean Walsh
Sean Walsh

Reputation: 8344

The code in stars.js is evaluated when the document is ready, but jQuery has no knowledge of Angular replacing the view content in ng-view, so it won't attach the rating plugin to any newly added elements. Generally, you want to wrap jQuery plugins in Angular directives so that you can use them the "Angular way." For example:

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

Which would be used like this in your view:

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

Code above is untested, but it should give you the gist of it.

Upvotes: 2

Related Questions