0

I am trying to use the "minisCtrlOverall" controller in my ng-include file, but none of the functionality in my controller works for the included file unless I put ng-controller in the actual overall.html file. What I am trying to do is access the "ring-fill" class that is in my overall.html file from my controller. I want to add the class "active" too all "ring-fills" but its not working. I'm guessing this isn't working because the included files comes after the controller runs? Anyone know how I can fix this?

Controller:

angular.module('ciscoImaDashboardAdmin',[])
.controller('minisCtrlOverall', function ($scope, $rootScope, dummyData) {
    $scope.overallOn = true;

    $scope.switchView = function(element) {
        var value = element.target.attributes['value'].value;

        if(value == "overall") {
            $scope.overallOn = true;
            $scope.swimlaneOn = false;
        }
        else if(value == "swimlane") {
            $scope.swimlaneOn = true;
            $scope.overallOn = false;
        }
    };


    var totalRings = 9;
    var maxScore = 10;

    var data_overall = {
        average_score:  6
    }

    var ringToHighlight = Math.floor((data_overall.average_score/maxScore)*totalRings); //round down

    var i = 0;
    var rings = [];
    var ringClass = 'path.ring-fill:not(.ring-border)';

    $(ringClass).each(function(){
        rings.push($(this)[0]);
    });

    while( i < ringToHighlight) {
        fillPath(i);
        i = i + 1;
    }



    function fillPath(i) {
        if(i < ringToHighlight) {
            var selectedRing = $(rings[i]);
            selectedRing.attr("class", "ring-fill active");
        }
    }

});

HTML:

<div class="row mini" ng-show="overallOn" ng-controller="minisCtrlOverall">
   <div class="col-sm-3">
     <div ng-include="'svgs/overall.html'"></div>
   </div>
</div>
Neha Sohail
  • 239
  • 3
  • 19
  • 1
    You're using AngularJS the same way you would use jQuery. That's not a good idea at all. Never do DOM manipulation from a controller. The DOM should be constructed based on the model, using angular expressions and directives in the template. Forget that jQuery exists. – JB Nizet Dec 27 '15 at 21:34
  • @JBNizet okay so how can I add the class "active" to "ring-fill" element that is in my overall.html file? – Neha Sohail Dec 27 '15 at 21:42
  • Using ng-class: `
    ...
    `. Now, if the controller sets $scope.shouldRingFillsBeActive to a truthy value, the element will have the active class. Otherwise, it won't. What are you trying to achieve, at a higher level?     – JB Nizet Dec 27 '15 at 21:54
  • @JBNizet this works fine but how can I set the ng-class to true for certain elements in an array. For example: I can change the attr class for specific elements in an array by doing this: `var selectedRing = $(rings[i]); selectedRing.attr("class", "ring-fill active");` Or I can use ng-class and do this but it will set all the elements to true which is not what I want: `$scope.shouldRingFillsBeActive = true;` – Neha Sohail Dec 29 '15 at 15:07
  • Again, you seem to use DOM elements as your model. Don't do that. Use basic JS objects, containing data, and generate DOM elements from these simple JS objects. Suppose you have an array of objects `$scope.rings`, and one of these objects is selected: `$scope.selectedRing = $scope.rings[3]`, you can display them all using `
    {{ ring.name }}
    `. Now if you want to make the first ring selected, just do `$scope.selectedRing = $scope.rings[0];`, and the DOM will be updated by angular automatically.     – JB Nizet Dec 29 '15 at 16:02
  • @JBNizet the ng-repeat won't work because the rings are part of an svg. – Neha Sohail Dec 30 '15 at 05:35

0 Answers0