在角js小例子中綁定丟失（點擊後）

我在Angular JS中有一個非常小的應用程序。它放置在一個更大的rails應用程序中，但我沒有看到太多的交互。角度應用程序允許用戶與一組類別進行交互。一樣容易：在角js小例子中綁定丟失（點擊後）

var angular_app = angular.module('angular_app', []); 

angular_app.config(['$httpProvider', function($httpProvider, $cookieStore) { 
//Protection 
}]); 

angular_app.controller('CategoriesController', function ($scope, $http) { 

$scope.isEditing = false; 
$scope.categoryName = ''; 

$http.get('/api/categories').success(function(data) { 
    //We use this to data-bind with the HTML placed below 
    $scope.categories = data; 
}); 

$scope.addNewCategory = function() { 
    ... 
} 

$scope.editCategory = function(index) { 
    if (!index) 
     return; 

    var selectedCategory = $scope.categories[index]; 

    // With ng-show, we make visible the part of the UI 
    // that should be used for editing 
    $scope.isEditing = true; 
} 

$scope.cancelEditCategory = function() { 
    $scope.isEditing = false; 
} 

$scope.deleteCategory = function(index) { 
    ... 
} 

}); 

angular.element(document).ready(function() { 
    angular.bootstrap(document, ['angular_app']); 
});

的想法是，信息在列表中顯示，我們有一個「編輯」按鈕，允許用戶看到，這將讓他進行修改UI的其他部分。

<div ng-controller="CategoriesController"> 
<div ng-show='isEditing' class="popup_menu"> 
    DIV FOR EDITING 
    </div> 

    <ul> 
    <li ng-repeat="category in categories"> 
     <a href="#" ng-click='deleteCategory($index)'>[X]</a> 
     <a href="#" ng-click='editCategory($index)'>[E]</a>{{ category.name }} 
     </li> 
    </ul> 

    <input type="text" id="categoryTextBox" ng-model="categoryName"/> 
    <button id="submit" ng-click='addNewCategory()'>New category</button> 

</div>

當我點擊編輯按鈕，用戶界面的相應部分變得可見，但只是在那之後，事情發生，那應該呈現列表中的UL，完全失去了約束力，只是顯示的東西像：

[X] [E]{{ category.name }}

當它必須顯示：

[X] [E]computer science 
[X] [E]politics 
[X] [E]news

（這是我在範圍內）。它發生了幾次點擊後（並工作一秒）。 控制檯上沒有錯誤，沒有與其他庫的交互（據我所知）。

謝謝！

來源

2014-06-08 IoChaos

查看瀏覽器控制檯日誌以查找錯誤。 – Chandermani

謝謝！，但錯誤日誌是空的。 – IoChaos

看來我應該更小心的鏈接：

<a href="#" ng-click='deleteCategory($index)'>[X]</a> 
<a href="#" ng-click='editCategory($index)'>[E]</a>{{ category.name }}

不知道究竟是如何工作的，但目前看來，如果鏈接他的href屬性，GET請求是針對由127.0.0.1，以某種方式打破角碼。如果你把它們寫成：

<a ng-click='deleteCategory($index)'>[X]</a> 
<a ng-click='editCategory($index)'>[E]</a>{{ category.name }}

問題就解決了。感謝所有的閱讀和幫助！

來源

2014-06-08 10:31:13 IoChaos

Turbolinks

我有Angular沒有經驗，但也許你的問題可能是做Turbolinks - 這是鋼軌加載頁面只的<body>標籤的辦法 - 保持<head>完好。

Turbolinks在JavaScript的Rails上聲名狼借，因爲每當您重新加載<body>而沒有重新加載頁面的<head>部分時，所有的JS綁定都將消失。這個問題的解決，在正常的JS，就是用JQuery/Javascript delegation，並從document對象委託：

$(document).on("action", "delegated_object", function(){ 
... 
});

道歉，如果這不起作用 - 這是我們的一個共同的問題，但我有Angular沒有經驗，我不知道它是否會幫助你。

來源

2014-06-08 10:27:20

我第二個這個答案。 Turbolink是新的魔鬼，禁用它並快樂地生活。 –

在角js小例子中綁定丟失（點擊後）

回答

相關問題