NG-包括與UI的路由器不能正常工作

$ state.go（）我有這樣的：NG-包括與UI的路由器不能正常工作

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

這包括同時從/客戶路線和/客戶/按鈕：身份證路線。我可以動態地添加按鈕。當我將我的客戶增加使用這項服務界面按鈕：

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

像這樣從我的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') 
    }) 
}

（從模式這樣做與UI的基礎工程從pineconellc GitHub上）

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

此按鈕，但不影響正常工作，使用此代碼：

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

如果我只是做一個常規的按鈕，並使用該功能，它工作正常。所以我有一個問題。

正如我現在放置一個賞金，如果你想看到更多的代碼，請問，我會發布相關的來源。

來源

2015-05-18 dkran

看不到圖片，你是否也可以提供涉及此事的其他源代碼？謝謝 – Renesansz

[這裏是一個鏈接]（https://gist.github.com/dkran/b530625ee18bc8706106），其中包含我正在與之交互的buttonbar服務控制器和模板。我可以在一秒鐘內添加一些其他的東西。謝謝。 – dkran

看起來你在這裏傳遞的函數是一個字符串'buttonSvc.addButton（'goBack'，'返回'，'按鈕小'，'＃'，'toTheGrid（）'，2）'你可以刪除單個圍繞'toTheGrid（）'函數引用並重試？如果仍然不起作用，請嘗試刪除括號'（）'。然後讓我知道發生了什麼事。謝謝 – Renesansz

看兩個按鈕：

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

的第一部作品，第二沒有。（生成的html是相同的）看到plunk：http://plnkr.co/edit/znFa6lGUGmQ0bYw097zH?p=preview 原因很簡單 - 在第二種情況下，'foo（）'被視爲基本字符串。

所以，只需修改您的代碼，將函數傳遞給addButton。

來源

2015-05-24 23:14:32

我的確嘗試過，但問題在於按鈕的控制器，按照https://gist.github.com/dkran/b530625ee18bc8706106的要點，它超出了按鈕功能的範圍。試圖將該功能傳遞給該服務然後讓它在單獨的控制器中運行。可以做到嗎？當您查看呈現的html時，它不是字符串文字。這是一個實際的ng-click =「toTheGrid（）」正在渲染。這裏沒有問題。 – dkran

不要依賴你在html中看到的東西 - 即轉到瀏覽器控制檯並編輯html按鈕 - 從中刪除ng-click。按鈕仍然可以工作。那是因爲指令ng-click已經被執行，並且click事件被綁定到某個js函數。你可以傳遞字符串，然後在它的指令/控制器的make功能，如果你想，像$ parse（functionName）（$ scope，params）。 –

這可能與我正在嘗試做的事情類似。我的代碼庫中沒有代碼，但我基本上試圖將該功能推到當前ui-view之外，將其添加到按鈕欄以使其恢復。所以這是一個範圍問題，它不能再從customerDetail.js控制器的ui-view中訪問該函數 - 解析文檔實際上是零。它有什麼作用？ – dkran

我認爲問題在於你將'toTheGrid()'作爲字符串而不是函數傳遞。
我會嘗試這樣不同：

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

來源

2015-05-25 18:51:31 pasine

我從評論中注意到，你說你有一個動態html標籤如下：

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

我認爲href可能會阻止ng-click啓動。您可以嘗試從錨標記中刪除href =「＃」（默認情況下，它會調用preventDefault）。或者你可以在定位標記上寫一個屬性自定義指令，並在定製指令中調用preventDefault（）點擊事件

來源

2015-05-26 23:43:26 ngunha02

或者你也可以通過ng-click來代替href by ui-sref =「customers.list」 – ngunha02

可能是解決眼前問題的最簡單的方法之一，但它並不能解決我實際嘗試的方法使用代碼。 – dkran

因此，ui-sref適合你，對吧？您是否嘗試從標籤中取出href以查看ng-click是否啓動？或者寫一個錨標籤的屬性指令？ – ngunha02

NG-包括與UI的路由器不能正常工作

回答

相關問題