How to watch and re-evaluate expression in directive?

Question

I am trying to write custom directive and one of the requirements is that I should be able to disable one of the elements based on the expression set on attribute of the directive. Directive is declared like this

<sr-payment-edit payment="vm.paymentInfo" disablepaymenttypeselection="!vm.isPolicySelected || someOtherCondition">

Basically it is supposed to hide a payment type if a policy is not selected yet. Once policy gets selected, payment type would be enabled. Here is html template for that portion of the directive

<div class="row" data-ng-hide='hidePaymentType'>
    <div class="col-xs-12 p-l-0 p-r-0">
        <div class="col-xs-3">
            <div class="form-group">
                <label>Payment Type:</label>
                <select data-ng-model="payment.paymentTypeCode"
                        data-ng-disabled="disablePaymentType" class="form-control" style="width: 150px">
                    <option value="CASH">Cash</option>
                    <option value="CHCK">Check</option>
                    <option value="CCPP">Credit Card - Pre Pay</option>
                    <option value="MNOD">Money Order</option>
                </select>
            </div>
        </div>
    </div>
</div>

Here is directive code, in early stages

(function (angular) {

    'use strict';

    angular.module('app').directive('srPaymentEdit', srPaymentEditDirectiveFactory);

    function srPaymentEditDirectiveFactory() {
        return {
            restrict: 'E',
            templateUrl: 'app/app_directives/sr-paymentEdit/sr-paymentEdit.html',
            scope: {
                payment: '=',
                disablepaymenttypeselection: '@',
                hidepaymenttypeselection: '@'
            },
            transclude: false,
            controller: controller,
            link: link
        };
    }

    function link($scope, element, attrs, model) {

        if (attrs.hidepaymenttypeselection) {
            $scope.hidePaymentType = $scope.$eval(attrs.hidepaymenttypeselection);

        }

        if (attrs.disablepaymenttypeselection) {

            $scope.$watch(attrs.disablepaymenttypeselection, function (value) {
                $scope.disablePaymentType = $scope.$eval(attrs.disablepaymenttypeselection);
            });

        }  
    }

    function controller($scope) {

        if ($scope.payment != null) {

            if ($scope.payment instanceof PaymentInfo === false) {
                throw 'Invalid datasource type, must be instance of PaymentInfo';
            }

        } else {
            var info = new PaymentInfo();
            info.paymentTypeCode = 'CHCK';
            $scope.payment = info;
        }
    }
})(angular);

So far so good, watch fires and disables the selection, but after "vm.isPolicySelected" changes, naturally, watch for the attribute does not fire.

Is it possible to trigger watch so that "disablepaymenttypeselection" is re-evaluated?

Answer 1

Got it working. My problem was that I had created an isolated scope, yet I wanted to respond to changes in parent scope, without explicitly passing in all dependencies. So I re-wrote directive like this

function srPaymentEditDirectiveFactory() {
    return {
        restrict: 'E',
        templateUrl: 'app/app_directives/sr-paymentEdit/sr-paymentEdit.html',
        scope: true,
        //scope: {
        //    vm:'=',
        //    payment: '=',
        //    disablepaymenttypeselection: '=',
        //    hidepaymenttypeselection: '@'
        //},
        transclude: false,
        //controller: controller,
        link: link
    };
}

function link($scope, element, attrs, model) {

    var info = null;

    if (attrs.payment == undefined) {
        info = new PaymentInfo();
        info.paymentTypeCode = 'CHCK';

    } else {
        info = $scope.$eval(attrs.payment);

        if (info instanceof PaymentInfo === false) {
            throw 'Invalid datasource type, must be instance of PaymentInfo';
        }
    }

    $scope.payment = info;

    if (attrs.hidepaymenttypeselection) {
            $scope.hidePaymentType = $scope.$eval(attrs.hidepaymenttypeselection);
        }

        if (attrs.disablepaymenttypeselection) {
            $scope.$watch(attrs.disablepaymenttypeselection, function (value) {
                $scope.disablePaymentType = $scope.$eval(attrs.disablepaymenttypeselection);
            });
        }
    }

})(angular);

Answer 2

You declare that your attributes 'disablepaymenttypeselection' and 'hidepaymenttypeselection' are one way binded as text:

        scope: {
            payment: '=',
            disablepaymenttypeselection: '@',
            hidepaymenttypeselection: '@'
        },

I think you need to use a two way binding ('=') so you can toggle the (boolean) property to hide or show your html.

With your code if you 'console.log($scope.disablepaymenttypeselection)', the you would get the following output as string:

!vm.isPolicySelected || someOtherCondition

Read this for more info about directives and bindings: When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

Answer 3

Looks like the problem is that in directive scope configuration you need to use = binding, not attribute @. So try this:

scope: {
    payment: '=',
    disablepaymenttypeselection: '=',
    hidepaymenttypeselection: '@'
},

and also change watch part a little (use just property name):

$scope.$watch('disablepaymenttypeselection', function(value) {
    $scope.disablePaymentType = $scope.$eval(attrs.disablepaymenttypeselection);
});