Question

我正在使用AngularJS并在导航栏中有多个菜单项，我想要的主要是当前为我所在的页面选择的那个菜单项＃34;突出显示＆＃34; （有深色背景和白色文字）。它是根据浏览器URL链接比较选择的。这个导航栏＆＃34;重新加载＆＃34;每次点击其中一个链接。

我无法改变我如何处理此问题（即避免重新加载导航栏），因为我已经给予了应用程序的要求。

className

我的问题是，我能够动态更改所选元素的angular.module('myApp') .directive('navBarSelect', function ($location) { return { restrict: 'A', link: function (scope, element, attrs) { console.log("Location path is: " + $location.path()); console.log("Elem attrs.href is: " + attrs.href.substr(2, attrs.href.length)); //URL load starts with '#!' in the URL, skip it in check if (attrs.href.substr(2, attrs.href.length) === $location.path()) { console.log("elem matched here it is before: "); console.log(element); element.className = 'menuItem selectedMenuItem'; console.log("elem after: "); console.log(element); // *1 } else { console.log("Elem did not match"); element.className = 'menuItem'; console.log(element) } } } });，但更改并未反映在我的屏幕上。

这是我的HTML视图：

这是我的指示：

.selectedMenuItem {
    background: #37474F;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    color: rgb(255, 255, 255);
}

这是我想要生效的简单CSS：

after

当我运行它时，每次点击都会验证所有元素，className console.log表示对象的if根据评估方式进行更改在console.log声明中。我在显示时注意到标有*1注释的def selectionSort(aList): #For each index in the list (not the last one) for i in range(len(aList)-1): #initialized minIndex minIndex = i #For each index from i+1 to the end... for j in range(i + 1, len(aList)): #find the min of the list and update minIndex if aList[j] < aList[minIndex]: minIndex = j; #if minIndex changed, swap i and minIndex values if minIndex != i: aList[i], aList[minIndex] = aList[minIndex], aList[i] #Return the resultant list return aList，没有显示原始元素，而是显示在持有该元素的对象上。这与它有什么关系吗？有什么建议吗？

Answer 1

元素用jqLite（或jQuery，如果它已加载）包装，所以你可能需要使用addClass：

element.addClass('menuItem selectedMenuItem');

AngularJS指令动态类改变没有占据上风

1 个答案: