Question

我没有经验丰富的棱角分明和你的帮助！

我正在尝试为基于角度的网站创建标签导航。

这是我的HTML：

<body ng-app = "app">
    <div class="bottom-content-container">
        <form class = "tab-nav">
            <tab-nav nav = "popular"></tab-nav>
            <tab-nav nav = "recent"></tab-nav>
        </form>

        <div class="tab-content" ng-switch = "tab">
            <div ng-switch-when = "popular">
                Popular Images
            </div>
            <div ng-switch-when = "recent">
                Recent Images
            </div>
        </div>
    </div>
  </body>

这是js：

var app = angular.module('app', []);

app.directive('tabNav', function () {
  return {
    template : '<label> <input type="radio" ng-model="tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
    replace:true,
    scope:{
      nav: '@'
    }
  };
});

可能是因为我弄乱了范围，指令并没有改变＆＃34;标签＆＃34;变量，所以没有任何反应。

以下是jsbin

提前致谢！

Answer 1

我做了jsbin。

在指令范围中，@用于绑定属性，因为您的指令应设置一个将从外部读取的选定值，您需要使用=。然后我将所有内容包含在一个ctrl中以保存此选定值，以便您的内容可以使用它来显示选项卡。

Answer 2

JSBIN

我找到了解决方案！不知道它的消极方面是什么，但效果很好！

我将标签传递给tab-nav并且效果很好（y）

Answer 3

<tab-nav ng-click="tab='popular'" nav = "popular"></tab-nav>
  <tab-nav ng-click="tab='recent'" nav = "recent"></tab-nav>

Answer 4

另一种解决方案是使用$parent：

app.directive('tabNav', function () {
  return {
    template : '<label> <input type="radio" ng-model="$parent.tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
    replace:true,
    scope:{
      nav: '@',
      tab : '='
    }
  };
});

还要注意value属性是如何绑定的。

Angular Directive无法访问范围

4 个答案: