You are correct that the view and model seem more tightly linked than other MVC style implementations. Maybe this is partly due to MVVM influence where the ModelView is seen to represent the model of the view. It also holds commands which mutate this model. So, the developer will bind to properties & methods of the modelView. To utilize 2way binding, you need to directly reference a model in this way (how could you do this just with events for example?)
Separation of concerns isn't all about FULLY decoupling elements. For example, if the controller linked to the view via DOM selectors (jquery style) then attached its functionality imperatively, then what happens if you refactor the view? Depending how your selectors are setup, different changes to hierarchy, naming, or removal of elements (possibly addition), will cause your selectors to break. So, you are actually linked to the view, changes in one layer require changes in another. Admittedly, this could be seen as LESS tightly coupled, but angular's coupling provides other features, and convenience. On 16 November 2014 16:45, Witold Szczerba <[email protected]> wrote: > What exactly is your question here? Is it about creating "hideButton" > and "isRowDisabled" properties on the actor objects? If that is so, > then I would agree with you, it does not look OK to me. > > Why do you pollute actor objects with stuff like that? Just take those > properties elsewhere, make the names more meaningful. > > You can create presentation model and methods like for example: > isActorDisabled(actor) > isActorUpdatable(actor) > > and then, in your HTML just use those methods instead. > > Do not make the names like "hideButton", try to figure out the real > meaning and operate using that names in your controllers. > "isActorUpdatatble" is much better that "hideButton", and you maybe > provide yet better name. > > Imagine you writing a test for that controller. What would be the > scenarios? Looking at the controller from outside, what do you expect > it to do? Maybe write a test (runnable specification) to find it out. > Sometimes it is enough just to think about such a specification and > sometimes it actually helps to write one. > > Regards, > Witold Szczerba > > On Sun, Nov 16, 2014 at 7:12 PM, Mohammad Kamruddin Ali Ahemad > <[email protected]> wrote: > > Hello Folks, > > > > Below is my HTML code snippet. > > <style> > > .selected { > > background-color: lightgreen; > > } > > </style> > > <script type="text/javascript" src="angular132.js"></script> > > <script> > > > > var app = angular.module('ActorApp', []); > > var Controller1 = app.controller('Controller1', > function($scope, > > $http) { > > $scope.actorList = []; > > $scope.fetchAllActors = function() { > > > > $http.get('http://localhost:8080/MysqlRestDB/webresources/entities.actor > ', > > {responseType: 'json'}). > > success(function(data, status, headers, > config) > > { > > $scope.actorList = data; > > }). > > error(function(data, status, headers, > config) { > > > > }); > > }; > > $scope.selectRow = function(row,actor) { > > $scope.selectedRow = row; > > actor.isRowDisabled = true; > > actor.hideButton = true; > > }; > > $scope.updateActor = function(actor) { > > actor.lastUpdate = new Date(); > > var putData = {"actorId":actor.actorId,"firstName": > > actor.firstName, "lastName": actor.lastName, "lastUpdate": > > actor.lastUpdate}; > > > > > > $http.put(' > http://localhost:8080/MysqlRestDB/webresources/entities.actor'+'/'+actor.actorId > , > > putData, {responseType: 'json'}). > > success(function(data, status, headers, > config) > > { > > //$scope.actorList = data; > > console.log("Update actor response " + > data > > + " status " + status); > > actor.isRowDisabled = false; > > actor.hideButton = false; > > $scope.selectedRow = null; > > }). > > error(function(data, status, headers, > config) { > > > > > > }); > > }; > > > > }); > > <div ng-controller='Controller1'> > > <button ng-click="fetchAllActors()">Check Test</button> > > <table ng-show="actorList.length" border='2'> > > <tbody> > > <tr> > > <th>Actor Id </th> > > <th>First Name </th> > > <th>Last Name </th> > > <th>Last Update Date </th> > > <th>Click To Edit </th> > > </tr> > > <tr ng-repeat="actor in actorList" > ng-class='{selected: > > $index===selectedRow}'> > > <td><input ng-model='actor.actorId' > > ng-disabled='true'/></td> > > <td><input ng-model='actor.firstName' > > ng-disabled='!actor.isRowDisabled'/></td> > > <td><input ng-model='actor.lastName' > > ng-disabled='!actor.isRowDisabled'/></td> > > <td><input ng-model='actor.lastUpdate' > > ng-disabled='true'/></td> > > <td> > > <button ng-click='selectRow($index,actor)' > > ng-hide='actor.hideButton'>Edit</button> > > <button ng-click='updateActor(actor)' > > ng-hide='!actor.hideButton'>Save</button> > > </td> > > </tr> > > </tbody> > > </table> > > </div> > > > > If you see here i am trying to iterate a list here with ng-repeat. For > > visibility ofcourse i had to so many logic coupled with the HTML > elements. > > It does not look like controller and html are separate and they do > combine > > with each other which we can not separate. Am i missing something? Am i > not > > following AngularJS standards? Is there any better way to achieve what i > am > > doing here? > > > > -- > > You received this message because you are subscribed to the Google Groups > > "AngularJS" group. > > To unsubscribe from this group and stop receiving emails from it, send an > > email to [email protected]. > > To post to this group, send email to [email protected]. > > Visit this group at http://groups.google.com/group/angular. > > For more options, visit https://groups.google.com/d/optout. > > -- > You received this message because you are subscribed to the Google Groups > "AngularJS" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- Tony Polinelli -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
