2013-04-23 22 views
5

Próbuję utworzyć funkcję podobną do mojej aplikacji. Chcę móc ustawić wartość dynamicznie generowanej liczby jako "licznik podobny". Problem polega na użyciu 'ng-init', ponieważ dokumentacja mówi, że jest to zły sposób na zrobienie tego!Alternatywa dla używania ng-init w widoku?

Jak ustawić wartość w "kontroler" zamiast "widoku"?

Oto co mam do tej pory:

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
    <article ng-repeat="feed in feeds"> 
    <h3>{{feed.createdby}}</h3> 
    <p>{{feed.content}}</p> 
    <button ng-click="likeClicked($index)">{{isLiked[$index]|liked}}</button> 
    <span ng-init="likeCount=feed.likes.length">{{likeCount}}</span> 
    </article> 
</body> 
</html> 

Dzięki,

JP

Odpowiedz

3

Wystarczy zmienić

`<span ng-init="likeCount=feed.likes.length">{{likeCount}}</span>` 

za

`<span>{{feed.likes.length}}</span>`. 

Jeśli nadal trzeba liczyć w kontrolerze dla jakiegoś innego powodu (czego nie widać), należy utworzyć kontroler, załóżmy FeedCtrl i dodać go do swojej article:

<article ng-repeat="feed in feeds" ng-controller="FeedCtrl"> 
    ... 
    <span>{{likeCount}}</span> 
</article> 

i twoi FeedCtrl byłoby:

function FeedCtrl($scope) { 
    $scope.$watch('feed.likes.length', function(newValue) { 
    $scope.likeCount = newValue; 
    }); 
} 

Jeszcze innym rozwiązaniem byłoby utworzyć funkcję rozwiązać Ci wartość:

<article ng-repeat="feed in feeds" ng-controller="FeedCtrl"> 
    ... 
    <span>{{likeCount()}}</span> 
</article> 
function FeedCtrl($scope) { 
    $scope.likeCount = function() { 
    return $feed && $feed.likes ? $feed.likes.length : undefined; 
    }; 
} 
+0

Dzięki za odpowiedź. Wolę drugie podejście, które rzuciłem w Plunkera: http://plnkr.co/edit/aHyxJFXVrwIGb27iK45Q?p=preview – JohnRobertPett

+0

Mówi, że kanał jest niezdefiniowany ... – JohnRobertPett

+0

Przepraszam, moje złe. To '$ scope.feed'. Naprawiony. Zwróć też uwagę na "powrót", który przeoczyłem w pierwszej kolejności. –

0

Jeśli Twój karmi obiekt/tablica jest długa, to lepiej użyć NG-wiążą ze względu na wydajność.

<span ng-bind="likeCount"></span> 

zamiast

{{likeCount}}