Как смотреть и переоценивать выражение в директиве?

Question

Я пытаюсь написать настраиваемую директиву, и одним из требований является то, что я должен иметь возможность отключить один из элементов на основе выражения, установленного в атрибуте директивы. Директива объявляется следующим образом

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

В принципе, предполагается, что тип политики будет скрыт, если политика еще не выбрана. Как только политика будет выбрана, тип оплаты будет включен. Вот HTML шаблон для той части директивы

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

Вот директива код, на ранних стадиях

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

До сих пор так хорошо, смотреть пожары и отключает выбор, но после того, как «vm.isPolicySelected «Изменения, естественно, следите за тем, чтобы атрибут не срабатывал.

Можно ли запускать часы так, чтобы «disablepaymenttypeselection» пересматривалась?

Answer 1

Похоже, проблема заключается в том, что при настройке области действия вам необходимо использовать привязку =, а не атрибут @. Так что попробуйте это:

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

, а также изменить часы часть немного (используйте только имя свойства):

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

Answer 2

Вы заявляете, что ваши атрибутов «disablepaymenttypeselection» и «hidepaymenttypeselection» являются одним из способов переплетены в виде текста :

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

Я думаю, вам нужно использовать два способа связывания («=»), так что вы можете включить свойство (булево), чтобы скрыть или показать свой HTML.

С вашего кода, если вы console.log (scope.disablepaymenttypeselection $) ', то вы получите следующий результат в виде строки:

!vm.isPolicySelected || someOtherCondition 

Читать это для получения дополнительной информации о директивах и привязок: 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

Получил его работу. Моя проблема заключалась в том, что я создал изолированную область видимости, но я хотел ответить на изменения в родительской области, без явной передачи во всех зависимостях. Поэтому я вновь написал директиву, как это

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