js-data/js-data-angular

bind/bindAll not directly usable with controllerAs syntax / paving the road to angular 2

reppners opened this issue · 2 comments

I'm moving my code base to use the angular "controllerAs" syntax as much as possible which is somewhat paving the path to angular 2.

I was able to completely remove $scope from most of my controllers by defining them as a class properties (TypeScript, but ES6 supports classes as well) containing my view bindings as properties.

Now I would like to bind the datastore to a property of my class which would lead to only use the $scope as service for setting up the watch and in the html I could bind to a property of my controller as all other properties are when using the "controllerAs"-syntax.

Here some insight on the "controllerAs"-syntax: http://toddmotto.com/digging-into-angulars-controller-as-syntax/

As I see it, we would have to enhance the interface of the js-data-angular bind functions especially the expression-parameter.

Does this not work for you?

angular.module('myApp', ['ngRoute', 'js-data'])
  .config(function ($routeProvider) {
    $routeProvider.when('/user/:id', {
      controller: 'UserCtrl',
      controllerAs: 'UserCtrl',
      template: '<div data-ng-bind="UserCtrl.user.name"></div>',
      resolve: {
        user: function ($route, User) {
          return User.find($route.current.params.id);
        }
      }
    });
  })
  .service('User', function (DS) {
    return DS.defineResource('user');
  })
  .controller('UserCtrl', function ($scope, $routeParams, User) {
    User.bindOne($scope, $routeParams.id, 'UserCtrl.user');
  });

Aah, seems I had another issue with shadowed controllers because I accidentally named two controllers the same when trying to get the binding to work. Thanks :)