Question

我的网站的所有页面都有一个div。

我想在任何地方显示它，但根据当前状态使用不同的数据（我使用UI路由器为angular1）

所以我决定使用指令。

pageoptions.html

<div class="page-options">
    <!-- if state = 'dashboard' -->
    <h1>Dashboard</h1>
    <a ui-sref="restore">Some Action</a>
    <a ui-sref="backup">Another Action</a>

    <!-- if state = 'Edit' -->
    <h1>Edit</h1>
    <a ui-sref="restore">Delete</a>

    <!-- if state = 'settings' -->
    <h1>Settings</h1>
    <a ui-sref="backup">Settings</a>
</div>

pageoptions-directive.js

myApp.directive('pageinfo', function() {
    return {
        restrict: 'A',
        templateUrl: "./components/pageinfo/pageinfo.html"
    };
});

但我不知道如何在HTML中的评论中插入我写的逻辑。

我很乐意就此提出一些建议

Answer 1

您应该能够将$ state服务注入到您的指令中，并使用它在标记中使用ng-hide或ng-show来检查当前状态。希望这能让你非常接近：

myApp.directive('pageinfo', ['$state', function($state) {
    return {
        restrict: 'A',
        templateUrl: "./components/pageinfo/pageinfo.html"
        link: function(scope) {
             scope.currentState = $state.current.name;
        }
    };
});

模板：

<div class="page-options">
  <!-- if state = 'dashboard' -->
  <div ng-show="currentState == 'dashboard'">
  <h1>Dashboard</h1>
  <a ui-sref="restore">Some Action</a>
  <a ui-sref="backup">Another Action</a>
  </div>

  <div ng-show="currentState == 'Edit'">
   <!-- if state = 'Edit' -->
   <h1>Edit</h1>
   <a ui-sref="restore">Delete</a>
  </div>

  <div ng-show="currentState == 'settings'">
    <!-- if state = 'settings' -->
    <h1>Settings</h1>
    <a ui-sref="backup">Settings</a> 
  </div>
</div>

Answer 2

也许这会有所帮助：

directive.js：

myApp.directive('pageinfo', function() {
    return {
        restrict: 'EA',
        scope: {
            state: '='  // if you want take a sting in directive , use '@'
        },
        templateUrl: "./components/pageinfo/pageinfo.html"
    };
});

template.html：

<div class="page-options">
    <!-- if state = 'dashboard' -->
    <div ng-show="state == 'dashboard'">
        <h1>Dashboard</h1>
        <a ui-sref="restore">Some Action</a>
        <a ui-sref="backup">Another Action</a>
    </div>

    <!-- if state = 'Edit' -->
    <div ng-show="state == 'Edit'">
        <h1>Edit</h1>
        <a ui-sref="restore">Delete</a>
    </div>

    <!-- if state = 'settings' -->
    <div ng-show="state == 'settings'">
        <h1>Settings</h1>
        <a ui-sref="backup">Settings</a>
    </div>
</div>

使用这样的指令：

<pageinfo state="get your state and put it in here"></pageinfo>

Angular Directive - 如何创建动态＆＃34;页面选项＆＃34;

2 个答案: