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

8
votes

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.

3
angularjsangularjs-scopeangular-ui-router
Can't see the picture, can you provide also the other source code involved in this matter? Thanks – Rene Padillo
Here is a link to a gist containing my buttonbar service controller and template that I'm interacting with. I may add some other stuff in a sec. Thanks. – dkran
It seems you're passing the function here as a string buttonSvc.addButton('goBack','Go Back', 'button small', '#','toTheGrid()',2) can you remove the single-quote surrounding the toTheGrid() function and try it again? If still doesn't work try removing also the parenthesis (). Then let me know what happened. Thanks – Rene Padillo
I've given you much more code to look at including routes. Please note: The call from customerList.js works perfect, with parens inside a string. the call from customerDetail.js fails. I've included my route definition file and both of those files in completion. – dkran
But that solution didn't work. the implementation expects a function with parens inside a string. – dkran

3 Answers

1
votes

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.

1
votes

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);
0
votes

I notice from the comment, you said you had a dynamic html tag as follow: 

<a href="#" class="button small ng-click-active" ng-click="toTheGrid()">Go Back</a>

I think the href may prevent the ng-click from firing up. You can try dropping the href="#" out of the anchor tag (by default, it will call preventDefault). Or you can write a custom directive for attribute on anchor tag, and in the custom directive, call preventDefault() on the click event