在使用Angular ui-bootstrap时出现错误：[$ compile：nonassign]

Question

I am getting the following error while navigating one page to another page using ui-bootstrap of Angular.js.

Error: [$compile:nonassign] http://errors.angularjs.org/1.4.6/$compile/nonassign?p0=%24state.current.name%20%3D%3D'principal.myplanManagement.myPlan'&p1=uibTab
    at Error (native)
    at http://oditek.in/Gofasto/js/angularjs.js:6:416
    at q (http://oditek.in/Gofasto/js/angularjs.js:74:45)
    at l (http://oditek.in/Gofasto/js/angularjs.js:74:120)
    at Object.<anonymous> (http://oditek.in/Gofasto/js/angularjs.js:116:15)
    at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:71)
    at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
    at HTMLAnchorElement.<anonymous> (http://oditek.in/Gofasto/js/angularjs.js:253:36)
    at HTMLAnchorElement.m.event.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8549)
    at HTMLAnchorElement.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.

I am explaining my code below.

<div>
 <uib-tabset>
 <uib-tab ui-sref="principal.myplanManagement.myTimeTable" active="$state.current.name =='principal.myplanManagement.myTimeTable'">
      <uib-tab-heading>Add MyTimeTable</uib-tab-heading>
    </uib-tab>
    <uib-tab ui-sref="principal.myplanManagement.myPlan" active="$state.current.name =='principal.myplanManagement.myPlan'">
      <uib-tab-heading>Add MyPlan</uib-tab-heading>
    </uib-tab>
    <uib-tab ui-sref="principal.myplanManagement.myWDS" active="$state.current.name=='principal.myplanManagement.myWDS'">
      <uib-tab-heading>Add MyWDS</uib-tab-heading>
    </uib-tab>
    </uib-tabset>
  <div ui-view></div>
</div>

When i am moving to Add MyPlan page this type of error i am getting in console.Please help me to resolve this error.

Answer 1

You can't put an expression in the active attribute as it's non-assignable.

You'd need a new variable / object to define which tabs are active.

$scope.tab3 = $state.current.name === 'principal.myplanManagement.myWDS';

active="tab3"

or

$scope.tabs = {
    1: ($state.current.name === 'principal.myplanManagement.myTimeTable'),
    2: ($state.current.name === 'principal.myplanManagement.myPlan'),
    3: ($state.current.name === 'principal.myplanManagement.myWDS')
};

active="tabs[1]"