Question

我的代码中有这个指令视图：

<div class="busy-indicator angular-animate" ng-show="busy"></div>
<div class="breadcrumblist" ng-class="atTopLevel ? ['at-top-level'] : null">
    <div class="breadcrumblist-display angular-animate">
        <label id="searchBox">Search</label><input class="c-context-menu-container  t-menu-background  c-context-menu-text" type="text" autocomplete="off" id="IdSearch" ng-model = "searchText.Name">
        <div class="breadcrumblist-parents">
            <div ng-show="::parents && parents.length >= 1"
                 ng-repeat="parentLink in parents"
                 class="breadcrumblist-parent-link t-breadcrumb--parent-bgcolor t-border--bottom-grey48"
                 ng-click="navUpToParent(parentLink)"
                 ng-class="{'selected': isSelected(parentLink.object), 'draggable': isDraggable(parentLink.object)}"
                 data-index="{{$index}}">


        </div>

但是，searchBox出现在我的应用程序的所有位置，但我想让它看起来只是针对一个指令。我该怎么办？我想把一个范围变量改为＆＃34; ng-show＆＃34;这个特殊的搜索框有一个条件，但我不知道该怎么做，你能帮助我吗？

Answer 1

在您提供有关特定问题的更多信息之前，您可以采取以下相关措施来调试问题并找到解决方案

searchBox出现在我应用的所有地方，但我想让它看起来只是针对一个指令

指令名称及其限制的组合可能导致指令出现在不需要的位置。

More information on restrict if needed。

例如，如果你有一个名为'breadcrumblistParentLink'的指令，它被限制在C（类） - 你可能会在不受欢迎的位置找到它，因为你也在使用这个类来设置一些元素的样式你的页面。

如果是这种情况，您可能会发现它有助于限制属性和元素的指令并给出一些唯一的名称。

我还想提一下你的问题

只是“ng-show”这个具有条件的特定搜索框，但我不知道该怎么做

如果您想要一个指令实例的特定行为，有多种方法可以做到这一点。

最常见的是传递属性。例如，这就是你使用它的方式

  <div my-awesome-directive show-searchbox="true"></div>

这就是你在指令范围上展示的方式

angular.module('myApp',[]);

angular.module('myApp').directive('myAwesomeDirective', function(){
  return {
    template: 'this is my template <span ng-show="showSearchBox">This is search box</span>',
    restrict: 'A',
    scope: {
      showSearchBox: '<'
    },
    link: function(scope, element, attrs){
      console.log(scope.showSearchBox);
    }
  }
})

您可以在此处使用它：https://plnkr.co/edit/4MdNeEafbZjq2kEFKYAl?p=preview

您还可以查看attrs变量（attrs.showSearchBox）的指令，并在某些情况下保留绑定。

例如：

angular.module('myApp',[]);

angular.module('myApp').directive('myAwesomeDirective', function(){
  return {
    template: 'this is my template <span ng-show="showSearchBox()">This is search box</span>',
    restrict: 'A',
    scope: {

    },
    link: function(scope, element, attrs){
      scope.showSearchBox = function(){
       return attrs.showSearchBox; 
      }
    }
  }
})

注意我在范围内使用了一个函数。

如果你对jquery更熟悉，这个函数也可以引用DOM并执行$(element).is('[show-search-box]')之类的操作 - 但强烈建议坚持使用有角度的方式。

Angular中的指令

1 个答案: