GomuGomuNoRocket
GomuGomuNoRocket

Reputation: 819

Angular directive behaviour not expected

I have this directive `

var xmlToHtml = function () {
    return {
        restrict: "A",
        templateUrl: 'Components/XML2Html/views/XML2Html.html',
        controllerAs: 'XmlToHtmlController',
        bindToController: true,
        scope: {
            xslt: '@',
            administrator: '='
        },
        link: function () {
        },
        controller: function ($scope, $timeout, $sce, $http, $filter, $timeout, $window) {
            $scope.administrator = this.administrator;
            $scope.$watch('administrator', function (newVal, oldVal) {
                console.log($scope.administrator);
            }, true);
        },
    };
}
xmlToHtml.$inject = [];

and in my html

 <div xml-to-html xslt="test.xslt" administrator="Agent.Administrator"></div>

scope Agent.Administrator is boolean. And change value outside of directive, so i want two ways binding.

The problem is that is not working, if bool administrator change value, directive know nothing! But the strange is that if i replace 'Agent.Administrator' with 'Agent' (all object and not only one flag of this) working perfect and catch any change of flag 'Administrator'.

Is there any different approach for boolean in directives? The strange here is that if i pass only the flag, directive doesn't know any of changes, but if i pass all object, directive know any changes.

Upvotes: 0

Views: 45

Answers (2)

Pravin Erande
Pravin Erande

Reputation: 89

You could simply put

 Agent.Administrator=true;

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68635

It is because boolean is a primitive type, so when you pass a boolean it copies the value and you have a new item. You can pass a object Administrator which has a property with that boolean value, example

Agent.Administrator = { isAdmin: false };

Upvotes: 1

Related Questions