Angularjs 如何查看和重新计算指令中的表达式？

我正在尝试编写自定义指令，其中一个要求是，我应该能够基于该指令的属性上的表达式集禁用其中一个元素。指令是这样声明的

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

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);

到目前为止还不错，watch会激发并禁用选择，但在“vm.isPolicySelected”更改后，自然会注意属性不会激发

---

是否可以触发watch，以便重新评估“disablepaymenttypeselection”？

看起来问题在于，在指令作用域配置中，您需要使用

=

绑定，而不是属性

@

。所以试试这个：

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

另外，还可以稍微更改监视部分（仅使用属性名称）：

---

您声明属性“disablepaymenttypeselection”和“hidepaymenttypeselection”以单向方式绑定为文本：

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

我认为您需要使用双向绑定（'='），以便可以切换（布尔）属性来隐藏或显示html

如果使用代码“console.log（$scope.disablepaymenttypeselection）”，则会得到以下字符串输出：

!vm.isPolicySelected || someOtherCondition

---

有关指令和绑定的更多信息，请阅读此文章：

已开始工作。我的问题是我创建了一个独立的作用域，但我想响应父作用域中的更改，而不显式地传递所有依赖项。所以我重新编写了这样的指令

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

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);

---

您很接近，但这不起作用，因为它是隔离作用域，“vm”未在作用域中传递，因此“vm.isPolicySelected”无法正确评估。检查我测试方法的演示，看起来它起作用了：感谢将演示放在一起，但我可以看到标志从true更改为false，但我仍然能够点击并打开付款类型选择，这一部分对我来说永远不会改变。我正在使用Chrome。您很接近，但这将不起作用，因为它是孤立的作用域，并且“vm”未在作用域中传递，因此无法正确计算“vm.isPolicySelected”。

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);