Total angular noob here, so perhaps a stupid question - is it possible to somehow use ngChange directive from inside controller, without defining it in the template?
What I really want is to be able to listen to user triggered change events on the inputs in the controller, but on my case, using $watch will not work because it will respond to all changes (whether they were made by the user or not).
Related
I've written a pagination control directive that is bound to the view controller on pageNumber and pageSize. When either value updates, the view controller makes the appropriate, paged search and updates the data table. The directive is inserted twice, above and below the data table.
Plunker (you'll want your console open)
The trouble I'm having is that the events fire twice, once for each directive. I tried modifying it to 1-way bind pageSize and pass it as an option to setPage(), but then the two directives don't stay in sync with each other or the view controller (if it updates pageSize).
Normally, I'd use an isolated scope, but I think that won't work here. Can I make this work like I want?
Rather than having two directives implement one $watch each, move it up in the the parent controller, where it will fire only per value change. Then, if you need to propagate some value to both directives, do that with another isolate scope variable.
I was wondering why $digest runs all the watches that have been registered on the scope, if you had multiple inputs with data coming from the scope in a view, why does AngularJS have to dirty check all the watches of the scope when for instance just one input field is bound to a label?
Angular is not clairvoyant; it doesn't know what your watchers do except by checking their value. If something may have changed that could potentially mean that displayed data needs to be updated, Angular will check all your watchers. If something never needs to be checked, it shouldn't have a watcher.
Of course it's possible that you have something that only needs to be bound once and won't change after that, which means it doesn't have to be checked constantly. I'm not sure if there's a standard solution for that, but here is a project on Github that provides one-time binding for Angular.
I am trying to understand the $scope and how controller and view are clued together. When Angular first runs through the DOM elements, when it finds ng-controller what does it do? I know when it finds the binding variables, it creates either watch or keydown events and also for the events it injects itself and watch for the other related events. It is done by creating a scope for that given DOM element. so when an item changes in view or model it can push the value to proper places. My question is when does controller is instantiated and $scope get injected into it and how $scope calls associated methods when a event happens?
Thanks
You would have to go through the documentation on their site for clarity. From what I understand when the framework encounters the ng-controller attribute on the view, it will attach and instantiate the controller. Any code directly within the controller function will run right there. If you want code to run only on certain events like a click event then you put ng-click='myFunction()' on the element and myFunction as a $scope property. If you want to run code inside a controller on some other event then you need to use $scope.$on within the controller and $scope.$broadcast to trigger the event outside. Note that controller should only have business logic. Any code to directly manipulate DOM goes within a Directive. Use scope property in the directive to bind variables and functions between the controller and the directive.
Again, as I said, it will help to go through documentation and videos on youtube to get a better understanding on the foundations of AngularJS.
Greetings Overflowers,
If I am changing an HTML native attribute (say a division's class) inside an event handler, do I need to wrap it with a call to $apply? In other words, are these native attributes watchable?
EXAMPLE:
I am doing a custom directive inside which I am modifying the element's classes for styling on certain events like mouse enter, but no modification to the scope (or model).
I am wondering if I need to surround this logic with a call to $apply just in case there is a $watch on these element's class attribute? Are these $watches possible using angularjs? My custom directive will be used by other programmers.
Kind regards
Any thing that Angular doesn't know about should be inside an $apply if you want bindings to be updated etc...
So no, this native attributes are not watchable if you manually change the DOM and it's not part of a user event or Angular's service event (like $http)
I'm trying to build web app that dynamically load interfaces, using angularJS.
I found that it was possible to bootstrap some portions of my code after the initial bootstrap of Angular (HTML template + Controller).
My problem is that, doing so, the 2-way data-binding doesn't work. See for yourself:
http://plnkr.co/edit/MtAWP6
Any idea? Am I seeking for something to do the wrong way?
Thanks!
Your problem isn't a bootstraping one (although you really shouldn't be using bootstrap to instantiate a controller, but rather $compile, imo - see this answer). It is a scope problem. You define a "mymodel" model in your controller, but then define it again in your form, for which angular automatically creates it's own scope. While the form's scope inherits from the parent scope, and thus seems to be "binding" the model, the inverse doesn't happen.
You need to either establish a binding between both scopes (or $watch the form's variable, or define the for in the surronding controller), or just assign the controller you want to the form, directly.
See your problem exposed here (see that while your $timeout changes both models, manually setting the model only changes one)
See it resolved here (by basically assigning your controller to the generated form, rather than to a enclosing div of said form)
I think maybe you should take another look at routing/ deep linking. You should be able to specify both a template url and a controller.
Check out this video
And the api docs