Question

我正在创建一个带有ngShow语句的指令，该语句取决于我想要传递的某些属性/条件。当我对ng-show进行硬编码时，它工作正常，但如果我尝试将值分配给范围，那么添加到模板它不会响应我的表单。渲染的html与我的源完全相同。

// Works
app.directive('message', function($filter, moment) {
  return {
    restrict: 'EA',
    template: '<div ng-show="forms.resetForm.$pristine && forms.resetForm.$submitted && forms.resetForm.$invalid" ng-transclude></div>',
    replace: true,
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {

    }
  };
});


// No workie
app.directive('message', function($filter, moment) {
  return {
    restrict: 'EA',
    template: '<div ng-show="{{ show }}" ng-transclude></div>',
    replace: true,
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {
      scope.show = 'forms.resetForm.$pristine && forms.resetForm.$submitted && forms.resetForm.$invalid';
    }
  };
});

如何指定动态ngShow语句？

Answer 1

您似乎不了解指令属性的工作原理。 ng-show需要一个布尔表达式，在范围上进行评估。所以，如果你想把这个复杂的布尔表达式放在JS代码中而不是直接放在模板中，它应该是：

template: '<div ng-show="shouldShow()" ng-transclude></div>'
...
scope.shouldShow() = function() {
    return scope.forms.resetForm.$pristine && 
           scope.forms.resetForm.$submitted && 
           scope.forms.resetForm.$invalid;
}

Answer 2

找到它 - 使用ngShow

app.directive('message', function() {
    return {
      restrict: 'EA',
      template: '<div class="alert alert-danger" ng-show="" ng-transclude></div>',
      replace: true,
      transclude: true,
      compile: function(element, attrs) {
        attrs.ngShow =  'forms.resetForm.$pristine && forms.resetForm.$submitted && forms.resetForm.$invalid';
      }
    };
  });

在指令中使用ngShow

2 个答案: