Tricky Angular 1 concepts explained

[genkio]

A list of tricky angular 1 concepts, and the best explanations I found.

What's the differences between ngModel formatter and parsers? source

• Formatters change how model values will appear in the view.
• Parsers change how view values will be saved in the model.

//format text going to user (model to view)
ngModel.$formatters.push(function(value) {
  return value.toUpperCase();
});

//format text from the user (view to model)
ngModel.$parsers.push(function(value) {
  return value.toLowerCase();
});

What does require: 'ngModel' do? source

• The require:'ngModel' and require:'^ngModel' allow you to inject the model attached to the element or its parent element on which the directive is bound to.
• Its basically an easiest way to pass ngModel into the link/compile function instead passing it using a scope option. Once you have access to ngModel, you can change its value using $setViewValue, make it dirty/clean using $formatters, apply watchers, etc.

myApp.directive('myDirective', function($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            $timeout(function() {
                ngModel.$setViewValue('StackOverflow');  
            }, 5000);                
        };
    }
  };
});

What does ng-transclude do? source

• Creating a directive that wraps other elements

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

// <hero name="superman">Stuff inside the custom directive</hero>

What does controllerAs and bindToController do?

• controllerAs: "us" – Assigns the controller object to $scope.us. If you’re used to putting variables directly on scope, this will be new to you.
• bindToController: true – Binds scope variables to the controller. In combination with controllerAs, this lets us access the user variable as us.user within the view.

angular.directive('userStatus', function() {
  return {
    restrict: 'E',
    template: '<span><i ng-class="us.iconCss()"></i> {{ us.user.status }}</span>',
    scope: {
      user: '='
    },
    controllerAs: "us",
    bindToController: true,
    controller: function() {
      var vm = this;
      vm.iconCss = function() {
        return vm.user.status === "enabled" ? 
          "fa fa-check" : "fa fa-times";
      };
    }
  };
});

Should business logic go into controller or link function in custom direcgives? source

• In short, the link function is where DOM manipulation belongs, a good amount of your business logic for a specific instance of something would be in your controller function.

var linker = function(scope, element, attrs){
  element.on('click', scope.someFunctionDefinedInTheControllerFunction); 
}; 

Why $scope.obj.data is better than $scope.data source