CODEWITHSUNDEEP
javascriptangularjs
Aviran Cohen
Aviran Cohen

Reputation: 5691

AngularJs Model changes don't update

I have a model that I want to be editable, but for some reason nothing change, the textbox doesn't show up and the model is not being updated when using ng-view.

I can see the function enableEditor() being called using console.log.

If I write it inline instead of ng-view in the index.html without the profile.html everything works perfectly.

here are the files:

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>

Does someone know what I am doing wrong?

thanks

Upvotes: 2

Views: 400

Answers (1)

tymeJV
tymeJV

Reputation: 104775

The link is adding to your address, causing the router to refresh the page and wack all your $scope vars. Instead of using blank anchors, use a span styled like an anchor:

span:hover {
    cursor:pointer;
}

This only gives the cursor the pointer finger, customize the colors as you wish. Per your comments as well, don't add the target=_self to the href, add it after:

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

As I said before though, use spans instead.

Upvotes: 1

Related Questions