Question

我是棱角分明的新手，这就是我遇到的问题。我创建了一个指令：

angular
.module('app.simpledirective')
.directive('simpledirective', function() {
    return {
        templateUrl: 'app/simpledirective/sample.html',
        bindToController: true,
        controller: SampleController
    };
});

function SampleController（$ scope）{}

//这是此指令的sample.html

<div class="outer">
    <div class="inner1">Show</div>
    <div class="inner2">Don't Show</div>
</div>

我遇到的问题是，如果我在两个不同的地方调用此指令，即：

<div>
    <simpledirective></simpledirective>        
</div>

如何在一个地方显示两个类，“inner1”和“inner2”，但在第二个地方，它只显示类“inner1”，即“inner2”被隐藏。

感谢您的帮助！

Answer 1

您可以尝试将参数传递给指令：

return {
    scope: {
      inner1: '=', 
      inner2: '='
    },
    templateUrl: 'app/simpledirective/sample.html',
    bindToController: true,
    controller: SampleController
};

像这样传递：

<simpledirective inner1="true" inner2="false"></simpledirective>

然后使用ng-class来决定是否应该应用这些类：

<div class="outer">
  <div ng-class="{inner1: inner1}">Show</div>
  <div ng-class="{inner2: inner2}">Don't Show</div>
</div>

Answer 2

您也可以通过在父类上添加类来完成此操作，例如
放置1。

<div>
    <simpledirective></simpledirective>        
</div>

放置2。

<div class="inner2Hide">
    <simpledirective></simpledirective>        
</div>

<强>的CSS：

.inner2Hide .inner2 {
  display:none
}

Answer 3

您可以将指令更改为接受指令定义中的属性，并使用它们来显示/隐藏<div class="outer"> <div ng-show="inner1" class="inner1">Show</div> <div ng-show="inner2" class="inner2">Don't Show</div> </div>中的特定div，如下所示。

angular
.module('app.simpledirective',[])
.directive('simpledirective', function() {
    return {
        scope : {
          inner1 : '@',
          inner2 : '@'
        },
        templateUrl: 'app/simpledirective/sample.html',
        bindToController: true,
        controller: SampleController
    };
});

<强> app.js

<div>
    <simpledirective inner1="true"></simpledirective>        
</div>

<强> main.html中

inner1

如果您只想显示inner2，请在指令中传递一些值并离开inner2="false"。请注意，如果您传递module MyFoo extend ActiveSupport::Concern extend Foo included do #some other stuff end def method_b end end，即使这被视为有效值，也会显示第二个div。只需为要显示的div添加属性值。

这里有一个示例pen来说明上述想法：）

如何在angular指令中更改单个元素的样式？

3 个答案: