[system_tracking] Fix issue with ng-if & truncated-text directives

awx/ui/static/js/shared/truncated-text.directive.js

@@ -2,11 +2,22 @@
 
 function link($compile, scope, element, attrs) {
 
+    // If the element is a DOM comment, that means
+    // it's been hidden with `ng-if` so don't try
+    // to process it or we get an error!
+    if (element[0].nodeType === 8) {
+        element = element.next();
+
+        // Element was removed due to `ng-if`, so don't
+        // worry about it
+        if (element.length === 0) {
+            return;
+        }
+    }
+
+
     function elementTextWillWrap(element) {
 
-        // If the element is a DOM comment, that means
-        // it's been hidden with `ng-if` so don't try
-        // to process it or we get an error!
         if (element[0].nodeType === 8) {
             return false;
         }
@@ -26,6 +37,7 @@ function link($compile, scope, element, attrs) {
     }
 
     function addTitleIfWrapping(text) {
+
         if (elementTextWillWrap(element)) {
             element
                 .addClass('u-truncatedText')
@@ -43,8 +55,6 @@ export default
     ['$compile',
         function($compile) {
             return {
-                priority: 1000, // make sure this gets compiled
-                               // before `title`
                 link: _.partial(link, $compile)
             };
         }

awx/ui/static/js/system-tracking/fact-data-table/fact-data-table.partial.html

@@ -28,12 +28,12 @@
             <div class="FactDataTable-row FactDataTable-row--flexible" ng-if="group.containsValueArray">
                 <span class="FactDataTable-column">{{group.facts.keyName}}</span>
                 <span class="FactDataTable-column FactDataTable-columnArray">
-                    <span class="FactDataTable-columnMember" ng-repeat="value in group.facts.value1">
+                    <span class="FactDataTable-columnMember" truncated-text ng-repeat="value in group.facts.value1">
                         {{value}}
                     </span>
                 </span>
                 <span class="FactDataTable-column FactDataTable-columnArray" ng-if="!singleResultView">
-                    <span class="FactDataTable-columnMember" ng-repeat="value in group.facts.value2">
+                    <span class="FactDataTable-columnMember" truncated-text ng-repeat="value in group.facts.value2">
                         {{value}}
                     </span>
                 </span>
@@ -63,10 +63,10 @@
                         <span class="FactDatum-keyName FactDataTable-column" ng-if="fact.isArrayMember">
                           {{fact.keyPath[0]}}.{{fact.keyName}}
                         </span>
-                        <span class="FactDatum-value FactDataTable-column u-truncatedText">
+                        <span class="FactDatum-value FactDataTable-column" truncated-text>
                         {{fact.value1}}
                         </span>
-                        <span class="FactDatum-value FactDataTable-column u-truncatedText" ng-if="!singleResultView">
+                        <span class="FactDatum-value FactDataTable-column" truncated-text ng-if="!singleResultView">
                         {{fact.value2}}
                         </span>
                     </div>