Question

我的网站导航包含大量重用的代码，而我正在尝试创建一些自定义指令来代替使用。

导航中有相当多的逻辑来应用各种css规则，更改属性等。

<a ng-href="/#/Discovery" class="header" 
ng-class="{active_header: $route.current.details[0].tab == 'discovery' && $route.current.details.length == 1, keep_open: $route.current.details[0].tab == 'discovery' && $route.current.details.length > 0}">
  <i class="fa fa-search"></i><span translate="reports.discovery.discovery"></span>
</a>

<a class="menu_toggle" data-target="#discovery_menu" 
ng-class="{disabled_toggle: $route.current.details[0].tab == 'discovery' && $route.current.details.length == 2, enabled_toggle: $route.current.details[0].tab != 'discovery' || $route.current.details.length != 2}"
ng-attr-data-toggle="{{($route.current.details[0].tab != 'discovery' && $route.current.details.length > 0) || ($route.current.details[0].tab == 'discovery' && $route.current.details.length == 1) ? 'collapse' : ''}}"
ng-attr-tooltip-enable="{{$route.current.details[0].tab == 'discovery' && $route.current.details.length == 2 ? 'true' : 'false'}}"
tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="{{'tooltips.navopen' | translate}}">
  <i class="fa fa-angle-down"></i>
</a>

导航有它自己的控制器，它使用$ scope和$ route并设置

$scope.$route = $route;

在上面看到的导航中用于检查当前路线。

我已经设法为第一部分创建了一个自定义指令，一个带有'header'类的标签，它的效果很好（fyi，使用typescript）

export class parentTab {
    public static Factory() {
        return {
            restrict: 'E',
            scope: {
                route: '=',
                tabName: '@',
                icon: '@'
            },
            templateUrl: '/app/templates/navigation/parentTab.html',
            link: function(scope, element, attrs) {
                console.log(scope.$parent.current);
            }
        }
    }
}

// used in html
<parent-tab route="$route" tab-name="discovery" icon="search"></parent-tab>

模板文件与以前的html代码完全相同，但使用“{{tabName}}”，例如“发现”。

我遇到的问题是为第二个和最大的部分创建一个指令（我以为我可以使用一个指令，但我正在学习我认为最好将它们分成两个现在再合并。）

当我点击ng-attr属性时会出现问题，例如启用工具提示：

ng-attr-tooltip-enable="{{$route.current.details[0].tab == 'discovery' && $route.current.details.length == 2 ? 'true' : 'false'}}"

我无法用'{{tabName}}替换'discovery'，因为如果我尝试的话，整个事情都包含在{{}}中：

Lexer Error: Unterminated quote at columns 33-43 ['{{tabName] in expression [(route.current.details[0].tab == '{{tabName]

我尝试删除外部{{}}，但这不起作用。

从这里我认为最好的选择是在指令本身中执行此逻辑，但我发现我的问题现在正在访问导航控制器上设置的$ scope。$ route。这是menu_toggle的指令（非常类似于parentTab）：

export class menuToggle {
    public static Factory() {
        return {
            restrict: 'E',
            scope: {
                route: '=',
                tabName: '@',
            },
            link: function(scope, element, attrs) {
                console.log(scope.route);
            },
            templateUrl: '/app/templates/navigation/menuToggle.html'
        }
    }
}

该console.log会导致路由对象被包含在应用程序中的所有路由中。它无处可访问当前路由或在每条路由上设置的详细信息数组，例如

.when('/Discovery', <any> {
  controller: 'DiscoveryController',
  details: [
    {path: '/Discovery', tab: 'discovery'}
  ]
})

如果我可以从导航控制器访问$ scope和/或$ route，我想我会在那里做得很好，但我似乎根本无法访问。我在网上阅读了各种各样的东西并用Google搜索到了地球的尽头。

我希望那里有人可以提供帮助...谢谢，我也很感激这是一个很长的问题，所以我希望它能说明我想要做的事情，感谢阅读，如果你已经做到了到目前为止。（我正在这个项目的一个2人团队工作，如果你想知道高级东西可能来自哪个那个人 - 我还在学习并掌握所有这些东西。）

更新我做了一个测试指令，它只是一个属性，

export class testRel {
    public static Factory() {
        return {
            restrict: 'A',
            template: '{{$route.current.details[0].tab}}',
            link: function(scope, element, attrs) {
                // console.log(scope.$route);
                // console.log(scope.$route.current.details[0].tab);
            }
        }
    }
}

模板部分{{$ route.current.details [0] .tab}}工作并显示页面上的当前选项卡，但我再也无法在我认为需要的链接中访问它做逻辑？

如果我在link.log链接函数中的路径，我得到一个路由对象，它里面有一个'当前'对象，里面有我需要的相关信息，我似乎无法达到它尝试console.log它。

更新2： 我现在通过使用带有console.log的setTimeout函数设法访问$ route.current - 下一步是尝试使用该指令中的逻辑和创建实际模板的指令。

我会随着时间的推移不断更新，谁知道我最终可能会得到一个答案......但请随意提供2美分：）

Answer 1

好的，所以我最终得到了这个 - 也许有一天这可能对其他人有帮助。

我发现我可以在testRel指令上创建一个控制器，并在指令链接函数中访问该控制器。

所以在testRel的控制器中我有一个简单的函数来设置我想要的变量，例如

controller: function() {
  this.tab;
  this.setTab = function(tab) {
    this.tab = tab;
  }
}

然后，在我的链接函数中，我可以像这样访问setTab函数：

link: function($scope, element, attrs, testRelCtrl) {
  setTimeout(function() {
    menuToggleLogicCtrl.setTab('tabname here');
  }, 0);
}

下一步swas在parentTab指令中使用此数据。我出现了指令的'require'属性，它允许你将两个指令链接在一起（或多个，如菊花链）并访问它的数据。

我需要该指令，然后链接链接函数内的数据。

return {
  require: '^testRel',
  scope: {
    ....
  },
  link: function(scope, element, attrs, testRelCtrl) {
    scope.testRelCtrl = testRelCtrl;
  }
}

有了这一切，我可以设置布尔值和变量等，然后使用

在指令模板中访问它们

{{ testRelCtrl.whateverIWant }}

顺便说一下，我将testRel指令设置为一个属性，并将parentTab指令设置为一个元素，现在无论我想在哪里使用它我只需要

<parent-tab test-rel></parent-tab>

以及我传入的数据的任何属性，这些属性在指令范围内设置。

访问控制器$ scope和指令

1 个答案: