각도 js에서 바인딩 손실 (클릭 후) 작은 예제

저는 Angular JS에서 매우 작은 어플리케이션을 사용합니다. 더 큰 레일 애플리케이션에 배치되었지만 너무 많은 상호 작용을 보지 못합니다. 각 응용 프로그램은 사용자가 범주 그룹과 상호 작용할 수 있도록합니다. 한 쉽게 :각도 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와 함께 할 수 - <head> 그대로 유지 - 이것은 단지 페이지의 <body> 태그를로드 레일의 방법입니다.

Turbolinks 때마다 당신이 당신의 <body> 페이지의 <head> 일부를 다시로드하지 않고, 모든 JS 바인딩이 사라질거야 다시로드, 레일에 자바 스크립트 악명이 높다. 이에 대한 해결책은 정상 JS에서, JQuery/Javascript delegation을 사용하고 document 객체로부터 위임하는 것입니다 : 문제가 해결되지 않을 경우

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

사과를 - 그것은 우리의 일반적인 문제입니다,하지만 난 Angular과 경험이 없기 때문에 , 나는 그것이 당신을 도울 것인지 아닌지 알지 못합니다.

출처

2014-06-08 10:27:20

나는이 대답을 초. 터보 링크는 새로운 악마입니다. 사용을 중지하고 행복하게 살 수 있습니다. –

각도 js에서 바인딩 손실 (클릭 후) 작은 예제

답변

관련 문제