0

I have 2 angular components : app-menu which use app-menuitem without transclude.

In index.html

<app-menu items="menuitems" ></app-menu>

In app-menu.html

<app-menuitem label="{{ item.label }}" isdisabled="item.isdisabled" ></app-menuitem>

In app-menuitem.html

<button data-ng-disabled="$ctrl.isdisabled">{{ $ctrl.label }}</button>

I would like to bind the attribute 'isdisabled' with a $rootScope variable in my controller like :

$scope.menuitems = [{label:"myButton", isdisabled: $rootScope.fooIsLoaded}, ...]

I manage to initialize it but not to bind it in order to refresh each time the $rootScope.fooIsLoaded value is changed which is the angular logic. Someone as an idea ?

J.BizMai
  • 2,621
  • 3
  • 25
  • 49
  • 1
    You should avoid binding to `$rootScope` if at all possible for starters. – David L May 12 '16 at 15:26
  • I know but I need to do it because I use an Iframe as well and there is an other attribute for this component which is a custom action on ng-click [more details here](http://stackoverflow.com/questions/36519057/how-to-eval-an-attribute-as-string-which-is-a-custom-function-using-angular-1-5/36631257#36631257) and that doesn't work with $scope of the controller. – J.BizMai May 12 '16 at 15:58
  • if I understand correctly, you can bind isDisabled – nurp May 16 '16 at 00:41
  • That's I'm trying to do. For the moment, I've just managed to initialize values with this variable ($rootScope.fooIsLoaded) in $scope.menuitems. – J.BizMai May 16 '16 at 13:43

0 Answers0