ng-include with $state.go() from ui-router not working

Question

I have this:

<ng-include src="'app/components/widgets/buttonbar.html'"></ng-include>

That includes buttons from both the /customers route and the /customers/:id routes. I can dynamically add buttons with actions. When I'm going to customers I add buttons using this service interface:

  this.buttons = []
  this.addButton = function(id, title, classes, href, action, sortOrder){
    console.log(this.buttons)
    var button = {};
    var pushViable = true;
    button.id = id
    button.title = title
    button.classes = classes
    button.href = href
    button.action = action
    button.sortOrder = sortOrder
    angular.forEach(this.buttons, function(index, sort){
      if(button.sortOrder === sort){
        toastr.error('Button Sort Order Exists')
        pushViable = false;
      }
    })
    if(pushViable === true){
      this.buttons.push(button)
      this.buttons = sortButtons(this.buttons)
      $rootScope.$broadcast('buttonBar:update')
    }
  }

like so from my customerlist:

buttonSvc.addButton('newCustomer','New Customer', 'button small', '#','newCustomer()',0)

$scope.newCustomer = function(){
  var customerModal = $modal.open({
    templateUrl: 'app/customers/newCustomer.html',
    controller: 'customerModalCtrl',
    windowClass: 'small'
  })

  customerModal.result.then(function(){
    $rootScope.$broadcast('customer:update')
  })
}

(doing so from a modal works with ui-foundation from pineconellc on github)

  buttonSvc.addButton('goBack','Go Back', 'button small', '#','toTheGrid()',2)

This button, however doesn't work, with this code in effect:

  $scope.toTheGrid = function(){
    $state.go('customers.list')
  }

If I just make a regular button and use the function it works fine. So I've got an issue.

As I have now placed a bounty, if you would like to see more code, please ask and I will post relevant sources.

Answer 1

Look at two buttons:

<button ng-click="foo()">click</button>
<button ng-click="{{'foo()'}}">click</button>

first work, second not. (Generated html is the same) See plunk: http://plnkr.co/edit/znFa6lGUGmQ0bYw097zH?p=preview And reason is simple - in 2nd case, 'foo()' is considered just as basic string.

So just modify your code to pass function to addButton.

Answer 2

I think the problem is that you are passing 'toTheGrid()' as a string instead of a function.
I would try something different like this:

buttonbar.html

<div class="container">
  <ul class="button-group" ng-controller="buttonBar">
    <li ng-repeat="button in buttons track by button.sortOrder">
      <a href="{{button.href}}" class="{{button.classes}}" ng-click="button.action()">{{button.title}}</a>
    </li>
  </ul>
</div>

customerDetail.js

buttonSvc.addButton('goBack','Go Back', 'button small', '#', $scope.toTheGrid, 2);