ng-schließen mit $ state.go() von ui-Router nicht funktioniert

Question

Ich habe dies:

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

, dass die Tasten sowohl von der/Kunden Route und/Kunden/includes: id Routen. Ich kann Schaltflächen mit Aktionen dynamisch hinzufügen. Wenn ich an den Kunden gehe ich hinzufügen Tasten, um diese Service-Schnittstelle mit:

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') 
    } 
    } 

wie so aus meiner Kundenliste:

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') 
    }) 
} 

(dabei von einem modalen arbeitet mit ui-Stiftung von pineconellc auf Github

)

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

Diese Taste, funktioniert jedoch nicht, mit diesem Code in der Tat:

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

Wenn ich nur einen normalen Knopf mache und die Funktion verwende, funktioniert es gut. Also habe ich ein Problem.

Da ich jetzt ein Kopfgeld gelegt habe, wenn Sie mehr Code sehen möchten, bitte fragen Sie und ich werde relevante Quellen posten.

Answer 1

Blick auf zwei Schaltflächen:

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

erste Arbeit, die zweite nicht. (Generierte HTML ist das gleiche) Siehe plunk: http://plnkr.co/edit/znFa6lGUGmQ0bYw097zH?p=preview Und Grund ist einfach - im zweiten Fall wird 'foo()' nur als Basis-String betrachtet.

Also ändern Sie einfach Ihren Code, um Funktion zu addButton zu übergeben.

Answer 2

Ich denke, das Problem ist, dass Sie 'toTheGrid()' als String statt einer Funktion übergeben.
würde ich etwas anderes wie diese versuchen:

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

Answer 3

ich aus dem Kommentar bemerken, Sie sagten, Sie eine dynamische hatte html Tag wie folgt:

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

Ich denke, die href kann verhindern, dass der ng-Klick hochfährt. Sie können versuchen, die href = "#" aus dem Anchor-Tag zu entfernen (standardmäßig wird preventDefault aufgerufen). Oder Sie können eine benutzerdefinierte Direktive für Attribut auf Anchor-Tag schreiben, und in der benutzerdefinierten Anweisung preventDefault() auf das Click-Ereignis aufrufen