页面更改时未正确调用AngularJs指令

AngularJs Directive does not get called correctly when page change

本文关键字：调用 AngularJs 指令      更新时间：2023-09-26

我的应用程序中有一个标头，它使用一个指令根据用户权限显示/隐藏链接，该指令使用一个返回布尔结果的解析承诺的服务。问题是标题导航链接没有正确显示/隐藏（它显示了以前用户可访问的链接，所以我假设没有调用该服务），当我使用chrome控制台进行调试时，我希望在服务或指令中显示一些日志，但什么都没有，我查看日志的唯一方法是重新加载页面。

指令：

.directive('hasAccess', ['PermissionsService', function( PermissionsService) {
return {
  restrict: 'A',
  scope: {
    requiredAccess: "@",
    requiredAccessFunc: '@'
  },
  link: function(scope, element, attrs) {
    PermissionsService[scope.requiredAccessFunc](scope.requiredAccess, scope.locationId).then(function(bool) {
      console.log("hasAccess");
      if (!bool) {
        element.addClass('hidden');
      }
    }, function(error) {
      element.addClass('hidden');
    });
  }
};
}])

服务：

smps.checkSettingsAccess = function(settingName) {
  console.log("checkSettingsAccess");
  var deferred = $q.defer();
  UserFactory.get().$promise.then (function(response) {
    deferred.resolve(response[settingName]);
  }, function() {
    deferred.reject(response);
  });
  return deferred.promise;
}

标头指令：

.directive('header', function () {
return {
  restrict: 'A',
  replace: true,
  templateUrl: "directives/header.html",
  controller: ['$scope', '$filter', function ($scope, $filter) {
    }]
}

})

标题html:

<li><a has-access required-access="company_access" required-access-func="checkSettingsAccess" ng-href="#/company_info">Company</a></li>
<li><a has-access required-access="locations_access" required-access-func="checkSettingsAccess" ng-href="#/locations">Locations</a></li>
<li><a has-access required-access="staff_members_access" required-access-func="checkSettingsAccess" ng-href="#/staff_members">Staff</a></li>
<li><a has-access required-access="customers_access" required-access-func="checkSettingsAccess" ng-href="#/customers">Customers</a></li>
<li><a has-access required-access="online_scheduling_access" required-access-func="checkSettingsAccess">Online Scheduling</a></li>

您的指令监视父作用域中的两个变量： scope: { requiredAccess: "@", requiredAccessFunc: '@' }

如果要呈现指令，则应更改此变量。因为你的指令取决于内部状态。

为什么smps.checkSettingsAccess传递deferred.resolve();或deferred.reject();，而.then(function(bool)接受布尔，你确定这是正确的吗？then函数中bool的值是多少？它可能是一个物体，因此总是真的？

我建议不要只是这样做：
element.addClass('hidden');
你这样做：element.removeClass('hidden');
并将所有HTML默认内容设置为class='hidden'，因为这是一个安全问题，在AJAX发生时应默认为隐藏。

到目前为止我所做的是：

  1. 删除hasAccess指令
  2. 将currentUser添加到rootScope，如：$rootScope.currentUser
  3. 使用currentUser询问给定的访问是真（显示）还是假（隐藏）

我知道。。。这不是最好的解决方案，因为它有点难看，但至少它有效。

我需要了解的是如何创建一个依赖于注入的服务的头指令（该服务通过rootScope使用ng资源），当rootScope.currentUser更改时，该指令应该能够以某种方式重新加载或赶上，以便在HTML中正确显示链接。

欢迎提出改进建议或任何意见。谢谢

    <li><a ng-show="currentUser['company_access']" ng-href="#/company_info">Company</a></li>
    <li><a ng-show="currentUser['locations_access']" ng-href="#/locations">Locations</a></li>
    <li><a ng-show="currentUser['staff_members_access']" ng-href="#/staff_members">Staff</a></li>
    <li><a ng-show="currentUser['customers_access']" ng-href="#/customers">Customers</a></li>
    <li><a ng-show="currentUser['online_scheduling_access']">Online Scheduling</a></li>
相关文章：