2013-09-06 2 views
2

У меня есть модель, которую я хочу редактировать, но по какой-то причине ничего не меняется, текстовое поле не отображается и модель не обновляется при использовании ng-view.Изменения в модели AngularJs не обновляются

Я вижу функцию enableEditor() вызывается с использованием console.log.

Если я пишу это рядный вместо ng-view в index.html без profile.html все работает отлично.

здесь файлы:

app.js

var proGamersApp = angular.module('proGamersApp', ['ngResource']). 
    config(function ($routeProvider) { 

     $routeProvider. 
     when('/', { controller: 'ProfileController', templateUrl: '/app/partials/profile.html' }). 
     otherwise({ redirectTo: '/' }); 
    }); 

var ProfileController = function ($scope) { 

    $scope.init = function() { 
     $scope.title = 'first title'; 
    }; 

    $scope.init(); 
    $scope.enableEditor = function() { 
     console.log('enableEditor()') 
     $scope.editorEnabled = true; 
     $scope.editableTitle = 'second title'; 
     $scope.title = 'second title'; 
    }; 

    ... 
}; 

index.html

<!doctype html> 
<html ng-app="proGamersApp"> 
<head> 
    <title>Pro Gamers</title> 

    <!-- Scripts --> 
    <script src="/app/lib/angular.min.js"></script> 
    <script src="/app/lib/angular-resource.js"></script> 
    <script src="/app/app.js"></script> 

</head> 
<body> 
    <div ng-view></div> 
</body> 
</html> 

profile.html

<div ng-hide="editorEnabled"> 
     {{title}} 
     <a href="#" ng-click="enableEditor()">Edit title</a> 
    </div> 
    <div ng-show="editorEnabled"> 
     <input ng-model="title" ng-show="editorEnabled"> 
     <a href="#" ng-click="save()">Save</a> 
     or 
     <a href="#" ng-click="disableEditor()">cancel</a>. 
    </div> 

Кто-нибудь знает, что я делаю неправильно?

благодаря

+1

Добавить 'target = _self' к вашим ссылкам,' # 'в конце, вероятно, обновляет страницу, так как она добавляет вашу ссылку. – tymeJV

+0

Я заменил href = "#" на href = "target = _self", и я вижу, что страница меняется, и появляется текстовое поле, но после мгновенного взгляда оно меняется обратно в ничто. если я удалю атрибут href элемента a, он не похож на ссылку, но выполняет задание. Вы знаете, как правильно это сделать? –

+1

Да, вы не должны использовать якоря, которые ничего не нацеливают, вместо этого используйте диапазон с правильным стилем CSS, чтобы он выглядел как ссылка (я знаю, использование пустых ссылок является заманчивым и легким, но вы столкнулись с такими проблемами) – tymeJV

ответ

1

Ссылка добавляет в ваш адрес, в результате чего маршрутизатор, чтобы обновить страницу и Вак все ваши $ сфера вары. Вместо того, чтобы использовать пустые якоря, используйте пролет стилизованный как якорь:

span:hover { 
    cursor:pointer; 
} 

Это дает только курсору на указательный палец, настроить цвета, как вы хотите. За ваши комментарии, а также, не добавляйте target=_self в HREF, добавить его после того, как:

<a href="#" target=_self ng-click="save()">Save</a> //prevent address bar change 

Как я уже говорил, хотя, использование охватывает вместо.

+0

«target = _self» не исправляет проблему элемента, даже если я помещаю его так, как вы показываете в своем примере, href должен быть либо пустым, либо отсутствующим, чтобы предотвратить перезагрузку страницы, поэтому вы можете удалить ее из ответ. Решение диапазона, однако, выполнило эту работу. Я изучаю его для дальнейшего использования, так как до сих пор я не использовал элемент span. –

Смежные вопросы