NickName:John Ask DateTime:2014-05-06T08:25:37

What's the angular way to get data from the partial into the controller?

Now that Angular says using ng-init is not appropriate in most cases (source), what's the right way of passing data in, when I don't have the data I need in $scope?

I'm trying to do let future developers use a simple controller to template data sourced from a service and applied via $scope to a partial, but I need a way for them to pass an id from the template to the controller to get the correct data from the service.

Imagine Widget1 has partial widget1.html and gets its data from http://localhost/widget1.json.

Previously, I would have added Widget1 to my app by inserting the following into the correct place, and passing the widgetID using ng-init.

<div class='simple-widget' ng-include src="'widgets/widget1.html'" ng-init=" widgetID = 'widget1'"></div>

widget1.html:

<div class='simple-widget' ng-controller="SimpleWidget">
    <p>Hello {{ data.user.name }},

    <p>{{ data.message }}</p>
</div>

All of the data object will come from the DataService, as seen below.

Controller:

angular.module('myApp.controllers', [])
.controller('SimpleWidget', ['$scope','StatService',function($scope,DataService) {
    $scope.data = DataService.get({id:$scope.widgetID});
  }])

Now that ng-init is discouraged, where can I put the id so that it arrives in the controller for using in my service?

Copyright Notice：Content Author:「John」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/23484054/whats-the-angular-way-to-get-data-from-the-partial-into-the-controller

Answers

Dmitri Zaitsev 2014-05-06T03:58:35

It is true that they could be more explicit about the details of that recommendation.\n\nMy understanding of it is that in a good MVC architecture, the View should not know about the actual Model (data). The data should be supplied by Controller. Abusing ng-init breaks this pattern, that is why it is discouraged.\n\nHowever, your use case looks legitimate, in fact, I found it the easiest and cleanest way to pass variables to templates embedded with ng-include. If you'd replace ng-include by a custom directive, you would put the same variable in an attribute, which fundamentally, doesn't make any difference - both times you pass data from inside your view. So if that is all you need, I don't see any reason to write an extra directive and clutter your code, when ng-include with ng-init will do just fine.\n\nThis is, however, only good when your application is small with very few inclusions. My main HTML is very small setting all the needed variables for the templates, so it basically plays a role of configuration controller. Don't do it in a large HTMLs where you can loose track of those ng-inits.\n\nSo when you have many templates needing configuration variables, these perhaps belong to a dedicated Config service that is consumed by your Controller that sets the variables for the templates. This is what seems to be recommended.\n\nThe use of ng-repeat as mentioned is an exception, as you don't (and don't want to) have direct access to each controller of each model from your iterator. Then you have to use ng-init.",