AngularJS: $eval,$parse,$compile

Watch youtube video Advanced UI, Plugins and Components in AngularJS, list the summary:

1. $eval, $parser, $compile

(a) $eval, $parse `$eval` is a scope method which executes an expression on current scope and return the result.

.controller('FormCtrl', function($scope, $attrs) {
  var color = $scope.$eval($attrs.color);
  ...
});

$parse is an AngluarJS service which converts an expression into a function. $parse like $timeout, $filter, $http, $compile, $controller are service, so it should return function (see ’https://docs.angularjs.org/api/ng/service/$parse’): @param: expression @return: function(context, locals)

(b) $parsers, $setValidity (using $parses in `directive->link`)

.link: function(scope, element, attrs, ctrl) {
  ctrl.$parsers.push(function(value) {
    var regex = /[A-Z]d[A-Z]s?d[A-Z]d/;
    var success = regex.test(value);
    ctrl.$setValidity('postal', success);
    return value;
  });
};

(c) $compile $compile(templateString)(scope) will compile plain templateString and link it with `scope`.

2. ng-messages

<input type="text" ng-model="postalCode" name="postalCode" required ng-minlength="6" postal-code-validator />
//v1.3 support:
<div ng-messages="form.postalCode.$error">
  <div ng-message="required">Required</div>
  <div ng-message="minlength">Min</div>
  <div ng-message="postal">Postal Code Invalid</div>
  <div special-message>Special</div>
</div>

3. Test

• debugger
• $0
• angular.element($0)
• angular.element($0).scope()
• angular.element($0).scope().index

4. Plugin / Component

my-plugin/ folder (the layout when write directive):

• plugin.html
• plugin.css
• plugin.js