Question

我尝试使用不同的templateUrl，具体取决于我的控制器中变量的值，但我无法绑定这些变量。我一直在尝试在链接功能中执行此操作，不确定是否有更简单的方法。首先，这是我的HTML：

<div po-generic-notification title='errorModal.title' error-list="errorModal.errorList" type="mostRecentError.type" message="mostRecentError.message" error="mostRecentError.message"></div>

这会触发以下指令（此阶段正在进行的工作......）：

.directive('poGenericNotification', function($compile) {
  var openFuncNameErm = 'openErm';
  return {
    controller: 'ErmModalCtrl',
    restrict: 'EA',
    scope: {
      title: '=',
      errorList: '=',
      type: '=',
      message: '='
    },
    transclude: true,
    link: function(scope, element, attrs) {
      console.log(attrs.type);
      if (attrs.type==="Alert") {
        templateUrl: 'src/alerts/templates/error-alert.html';
        error: attrs.message;
      }
      else if (attrs.type==="Info") {
        templateUrl: 'src/alerts/templates/info-alert.html';
        info: attrs.message;
      }
      error: attrs.message; //temporary
      element.removeAttr('po-generic-notification'); // necessary to avoid infinite compile loop
      var ngClick;
      if (attrs.before) {
        ngClick = attrs.ngClick ? openFuncNameErm + '()' + '; ' + attrs.ngClick : openFuncNameErm + '()';
      }
      else {
        ngClick = attrs.ngClick ? attrs.ngClick + '; ' + openFuncNameErm + '()' : openFuncNameErm + '()';
      }
      element.attr('ng-click', ngClick);
      $compile(element[0])(scope);
    }
  }
})

您可以在我的链接功能中看到，我尝试根据templateUrl的值有条件地设置attrs.type。 console.log的结果是mostRecentError.type而不是控制器的值。这是我的控制器：

.controller('ErrorModalCtrl', ['errorHandler', '$scope', function (errorHandler, $scope) {
    $scope.errorModal = {
        title: 'Notification Centre',
        errorList: []
    };
    $scope.mostRecentError = {
      type:'', message: '', timestamp: ''
    };
    $scope.addError = function(type, message) {
        errorHandler.addError(type, message);
        $scope.mostRecentError = errorHandler[0];
    };
    $scope.errorModal.errorList = errorHandler;
}]);

这是正确的做法吗？为什么我的attrs.type值是文字的，而不是对控制器的引用？

由于

Answer 1

你设置了范围，所以只需使用它而不是attrs：

link: function(scope, elem, attrs) {
    if (scope.type === 'Alert') {...}
}

我还建议只传递整个errorMsg一次：

scope: { errMsg: '='}

然后在你的HTML中：

<div po-generic-notification title='errorModal.title' error-list="errorModal.errorList" err-msg="mostRecentError"div>

然后在您的链接功能中，您可以访问它们：

scope.errMsg.type;
scope.errMsg.message;
scope.errMsg.error;

Answer 2

要通过传递的属性获取不同的模板，在指令声明中，您只需编写：

return {
    scope:{},
    templateUrl: function(element,attrs){
         if (attrs.type==="Alert") {
             return 'src/alerts/templates/error-alert.html';
         else if (attrs.type==="Info") {
             return 'src/alerts/templates/info-alert.html';
         }
    }
    link: function(){
        // ...
    }
};

当您通过attrs访问属性时，它们只是字符串集。如果从隔离范围（范围：{}）或范围。$ eval（）访问它们，那就是评估属性值并将其转换为父控制器的值或引用时。

尝试使用给定属性（Angular）有条件地设置TemplateUrl

2 个答案: