AngularJS associazione dati non funziona

ho scritto qualche codice semplificato sulla http://jsfiddle.net/gsche/1/AngularJS associazione dati non funziona

Quando clicco il link "Refresh", il modello "customer.name" non aggiorna la vista.

Ho scritto il codice sul mio computer locale e l'ho sottoposto a debugging con Batarang in Chrome.

La console non presenta errori. La pagina Modello in Batarang mostra il nome del cliente che cambia a destra, associato a un vecchio ID di ambito, ma anche gli ID degli ambiti $ cambiano.

Qualcuno può indicarmi la giusta direzione?

<div ng-app> 
    <div ng-controller="MainCtrl"> 
     <p> <a href="#" ng-click="Refresh()">Refresh</a> </p> 
     <p> 
      <input type="text" ng-model="customer.name"> 
     </p> 
     <p>{{ customer.name }}</p> 
    </div> 
</div> 


function MainCtrl($scope) { 


    $scope.customer = { 
     name: 'TTT', 
     id: 0 
    }; 

    $scope.Refresh = function ($scope) { 
     $scope.customer.name = 'Test'; 

    }; 

}

Update 1 2013/08/08 Grazie a tutti (@EpokK, @Stewie, @Hippocrates). Ora capisco il problema con jsfiddle e l'esempio funziona come dovrebbe.

Tuttavia, nella mia applicazione di test, l'associazione {{customer.name}} funziona, ma il clic "Aggiorna" non cambia il {{customer.name}} nella vista.

Ecco il contenuto della mia domanda. Penso che sia la stessa come l'esempio jsfiddle:

index.html

<!doctype html> 
    <head> 
    <title>Test</title> 
</head> 
    <body ng-app="roaMobileNgApp"> 


    <script src="scripts/angular.js"></script> 

    <script src="scripts/angular-ui.js"></script> 
    <link rel="stylesheet" href="scripts/angular-ui.css"> 

    <div class="container" ng-view=""></div> 

    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 


</body> 
</html>

app.js

'use strict'; 

angular.module('roaMobileNgApp', ['ui']) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    });

main.js

'use strict'; 

angular.module('roaMobileNgApp') 
    .controller('MainCtrl', function ($scope) { 


    $scope.customer = {name: '', 
         id: 0}; 



    $scope.getDetails = function() { 
     $scope.customer.name = 'Test'; 
    }; 

    });

main.html

<div ng-controller="MainCtrl"> 

    <a href="#" ng-click="getDetails()">Refresh</a> 
    <p><input type="text" ng-model="customer.name"> {{ customer.name }} </p> 

</div>

fonte

2013-08-07 Marius Mutu

Basta selezionare "No avvolgente - in" nelle opzioni di violino (perché altrimenti il vostro demo non funzionerà), e rimuovere il parametro $scope dalla vostra funzione Refresh. Non è necessario passare $scope perché la funzione stessa è definita all'interno di $ scope.

$scope.getDetails = function(){ 
    $scope.customer.name = 'Test'; 
};

fonte

2013-08-07 14:14:40 Stewie

Grazie a tutti voi. Il problema jsfiddle è risolto, ma il collegamento "Aggiorna" nella mia applicazione non aggiorna ancora il "nome cliente". Ho aggiornato la mia domanda con i file sorgente. –

Ho la risposta al mio problema. Il a href = "#" stava causando un aggiornamento della pagina. Se qualcuno ha lo stesso problema, vedere http://stackoverflow.com/questions/18127523/ng-click-does-not-update-model –

È HTML5 valido non richiedere un HREF in un elemento di ancoraggio in modo da poter rimuovere esso. –

È solo il modo in cui hai caricato i tuoi script.

mi piace per caricare angolare seguito dal mio app.js contenenti i controller a destra alla fine del corpo:

... 
    <script src="/assets/js/angular.min.js"></script> 
    <script src="/assets/js/app.js"></script> 
</body>

per ottenere il vostro lavoro violino, tutto quello che ho fatto è stato cambiare da "onReady" a " nel corpo"(E 'il piccolo menu a discesa nella parte superiore sinistra.)

check this out: http://jsfiddle.net/gsche/3/

onReady significa la tua definizione di controllo è stato avvolto in una funzione onReady da jsfiddle. Quando il sistema angolare è stato caricato e ha funzionato, il controller era ancora indefinito e l'angolare doveva andare avanti e sputare il modello grezzo.

fonte

2013-08-07 14:16:45 Hippocrates

Controllare la mia soluzione, devo modificare il vostro JSFiddle: http://jsfiddle.net/gsche/10/

function MainCtrl($scope) { 

    $scope.customer = { 
     name: 'TTT', 
     id: 0 
    }; 

    $scope.getDetails = function() { 
     $scope.customer.name = 'Test'; 
    }; 

}

fonte

2013-08-07 14:31:21 EpokK

AngularJS associazione dati non funziona

risposta

Problemi correlati