angularjs dane wiążące nie działa

pisałem jakiś uproszczony kod na http://jsfiddle.net/gsche/1/angularjs dane wiążące nie działa

Kiedy klikam odnośnik „Refresh”, model „customer.name” nie aktualizuje widok.

Napisałem kod na moim lokalnym komputerze i debugowałem go za pomocą Batarangu w przeglądarce Chrome.

Konsola nie pokazuje żadnych błędów. Strona Model w Batarangu pokazuje zmianę nazwy klienta po prawej stronie, powiązaną ze starym identyfikatorem zakresu, ale zmieniają się także identyfikatory $ zakresów.

Czy ktoś może wskazać mi właściwy kierunek?

<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 08.08.2013 Dziękuję wszystkie (@EpokK, @Stewie, @Hippocrates). Nie mogę teraz rozwiązać problemu z jsfiddle, a przykład działa tak, jak powinien.

Jednak w mojej aplikacji testowej działa powiązanie {{customer.name}}, ale kliknięcie "Odśwież" nadal nie zmienia wartości {{customer.name}} w widoku.

Oto treść mojej aplikacji. Myślę, że jest taka sama jak jsfiddle przykład:

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>

Źródło

2013-08-07 Marius Mutu

Wystarczy wybrać „No Wrap - w” w opcjach skrzypce (bo w przeciwnym razie nie będzie działać demo) i usunąć parametr $scope z funkcją Refresh. Nie musisz przekazywać $scope, ponieważ sama funkcja jest zdefiniowana w $ scope.

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

Źródło

2013-08-07 14:14:40 Stewie

Dziękuję wszystkim. Problem jsfiddle został rozwiązany, ale link "Odśwież" w mojej aplikacji nadal nie aktualizuje "nazwa klienta". Zaktualizowałem moje pytanie z plikami źródłowymi. –

Mam odpowiedź na mój problem. Funkcja a href = "#" powodowała odświeżenie strony. Jeśli ktoś ma ten sam problem, zobacz http://stackoverflow.com/questions/18127523/ng-click-does-not-update-model –

Prawidłowy HTML5 nie wymaga HREF w elemencie kotwicy, aby można było go usunąć to. –

To po prostu sposób w jaki załadowałeś swoje skrypty.

chciałbym załadować kątowe następnie moich app.js zawierających kontrolery w prawo na końcu korpusu:

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

Aby otrzymać pracę skrzypce, wszystko zrobiłem było zmienić go z „onReady” na " w ciele”(to trochę rozwijana przy lewym górnym rogu).

to sprawdzić: http://jsfiddle.net/gsche/3/

onReady oznacza, że definicja kontroler został owinięty w onReady funkcji przez jsfiddle. Do czasu załadowania kątowego i dotarcia do pracy, twój kontroler był wciąż nieokreślony i kątowy musiał iść naprzód i wypluł surowy szablon.

Źródło

2013-08-07 14:16:45 Hippocrates

Sprawdź moje rozwiązanie, mam zmienił swoją JSFiddle: http://jsfiddle.net/gsche/10/

function MainCtrl($scope) { 

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

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

}

Źródło

2013-08-07 14:31:21 EpokK

angularjs dane wiążące nie działa

Odpowiedz

Powiązane problemy