How to implement a controller tag in AngularJS

Question

I want to provide a set of access controllers to the methods and properties defined in the attribute. Right now, the best implementation I came up with is this:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, CtrlTrait) {
  $scope.name = CtrlTrait.presetName;
  CtrlTrait.setGreeting.call($scope, 'Hello');
});

app.service('CtrlTrait', function() {
  this.setGreeting = function(greeting) { this.greeting = greeting; }
  this.presetName = 'tom';
});

Plunkr Code

This is good, but I would like the properties and method to be accessible through the $ scope control area without the need to manually create an alias in each controller. I want to be able to use the properties and method from the template by simply inserting the service into the controller.

Is this possible, or do I need to create a [wrapper around] / [provider for] $scope, for example $specialCtrlScope, that sets the properties and methods that I want?

Answer 1

angular.extend : angular.extend($scope,CtrlTrait); $scope , . , html :

 <button ng-click="setGreeting('Good bye! ')">Good Bye</button>

:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, CtrlTrait) {
  $scope.name = CtrlTrait.presetName;
 // CtrlTrait.setGreeting.call($scope, 'Hello');
  angular.extend($scope,CtrlTrait);
  $scope.setGreeting('Hello World');
});

app.service('CtrlTrait', function() {
  this.setGreeting = function(greeting) { this.greeting = greeting; }
  this.presetName = 'tom';
});

http://plnkr.co/edit/BENS78mjFfpc6VCEtgK8?p=preview

Answer 2

$scope.setGreeting = CtrlTrait.setGreeting

$scope.setGreeting.call($scope, 'Hello');

  var app = angular.module('plunker', []);
  app.controller('MainCtrl', function($scope, CtrlTrait) {
    $scope.trait = CtrlTrait;
    $scope.name = $scope.trait.presetName;
    $scope.trait.setGreeting.call($scope,'Hello');
  });

  app.service('CtrlTrait', function() {
    var trait = {};
    trait.setGreeting = function(greeting) { this.greeting = greeting; }
    trait.presetName = 'tom';
    return trait;
  });

Answer 3

, ... , , . , , .

, , . (JSFiddle )

var app = angular.module('myApp', []);

var controllerMaker = function(trait,controllerCode){
    return function($scope, $injector){

        //'apply' traits to this scope
        var apply = function(trait){
            trait.applyTo($scope);
        }
        apply.$inject = [trait];
        $injector.invoke(apply);

        //Finishes the other injections
        controllerCode.$inject = ['$scope'];
        controllerCode($scope);
    };
}

//Here a sample 'trait'
app.service('CtrlTrait', function() {
    this.applyTo = function(obj){
        obj.setGreeting = function(greeting) { this.greeting = greeting; }
        obj.presetName = 'tom';
    }
});

//Then, setup your controller like this
app.controller('GreatController', controllerMaker("CtrlTrait",function($scope){ //Not using injection though!
    $scope.bleh = $scope.presetName; //will be 'tom'
}))

There are, of course, flaws in this, for example, how your controller loses injection, but if you wanted it reeeeeeally, I am sure you can play aruond with $injectand find something that suits your needs.

Answer 4

Angular will enter the return value of the function if it is an object. So in your code:

var app = angular.module('plunker', []);

app.controller('MainCtrl',["$scope","DefaultName","TraitService", function($scope, defaultName, traitService) {
  $scope.name = defaultName;
  $scope.OKPressed = function() {
    traitService.setName($scope.name);
  };

});

// You can use .constant() for a constant value;

app.constant("DefaultName", "tom");

app.service('TraitService', function() {
  var traitService = {}; // The name does't matter
  traitService.setName = function(name) {
  // Not this.name = name because (this)is not guaranteed to persist or be the same across injections.
  // I am only using local storage to illustrate.  I usually use $rootScope to store 
  // Global variables. since they are always available on the $scope object without 
  // needing a service.
  // That might be a better way for you ($rootScope)
        localStorage.setItem("nameKey", name); 
  }
  traitService.getName = function () {
    return localStorage.getItem("nameKey");
  }
  return traitService; // This is what will be injected above
});