Without getting into too much details with your code, at the end, the
notion of 'always use dots' is a simplification of how Javascript object
references work and how AngularJS internal $watches manage changes to these
object references and their attributes. Under these circumstances, you
MUST use objects and reference attributes within these objects using the
standard Javascript dot '.' notation, so there is nothing new there. As
for strings, they are JS primitive data types like ints and booleans see
here
<https://msdn.microsoft.com/en-us/library/ie/7wkd9z69%28v=vs.94%29.aspx>.
Since primitive types are initialized by having content COPIED to them. So
if string A is initialized to string B, if string B changes string A will
not change and will retain the original contents of string B. JS object
instances, on the other hand, once initialized to another object instance
will always point to the contents of the second object even if it changes.
THATS why the dot notation is important AND necessary.
On Friday, March 6, 2015 at 11:51:17 AM UTC-5, Дмитрий Грызунов wrote:
>
> Suppose, I have controller:
>
> angular.module('tf').controller('Ctrl', function($scope){
> $scope.params = {
> orderBy: null
> };});
>
> And a directive "common":
>
> angular.module('tf').directive("common", function() {return {
> restrict: 'E',
> replace: true,
> template: '<div><outer order-by="orderBy"><inner
> order-by-field="name1"></inner><inner
> order-by-field="name2"></inner></outer></div>',
>
> controller: function ($scope) {
> },
>
> scope: {
> orderBy: '='
> },
> link: function (scope, element, attrs) {
> }}});
>
> Controller is using directive within it's template:
>
> <div ng-app="tf"><div ng-controller="Ctrl">
> <common order-by="params.orderBy"></common>
> <div style="color:red">{{params.orderBy}}</div></div>
>
> This directive is using directive "outer":
>
> angular.module('tf').directive("outer", function() {return {
> restrict: 'E',
> transclude: true,
> replace: true,
> template: '<div ng-transclude></div>',
> controller: function ($scope) {
>
> this.order = function (by) {
> $scope.orderBy = by
> };
> },
> scope: {
> orderBy: '=',
> }}});
>
> Which is parent for the directive "inner":
>
> angular.module('tf').directive("inner", function() {return {
> require: '^outer',
> restrict: 'E',
> transclude: true,
> replace: true,
> template: '<div ng-click="onClicked()">{{orderByField}}</div>',
> controller: function ($scope) {
> $scope.onClicked = function () {
> $scope.outer.order($scope.orderByField);
> }
> },
> scope: {
> orderByField: '@'
> },
> link: function (scope, element, attrs, outer) {
> scope.outer = outer;
> }}});
>
> The directive "outer" shares "order" method with directive "inner" by it's
> controller. The directive "inner" is accessing it by using "require"
> mechanism.
>
> For some reason, this is not working as expected. If I place "orderBy"
> into object (e.g. {"order": {"by": null }} ) and use object instead of
> string value, everything is working as expected. I know about "always use
> dots" best practices principle, but I don't wanna use it here, because it
> would make my directive's API less intuitive.
>
> Here is jsfiddle: http://jsfiddle.net/A8Vgk/1254/
>
> Thanks
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
