[英]Directives in Angular
I have this directive view here in my code: 我的代码中有此指令视图:
<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>
But, the searchBox is appearing for all places on my app but I want to make it appear just for one directive in particular. 但是,searchBox出现在我的应用程序的所有位置,但是我想使其仅出现在一个指令上。 What should I do?
我该怎么办? I tought about make a scope variable to just "ng-show" this particular searchbox with a condition, but I don't know exactly how to do that, can you help me?
我努力使范围变量仅带有条件的“ ng-show”这个特定的搜索框,但我不知道该怎么做,你能帮我吗?
Until you give more information to your specific problem, here are some possibly relevant things you can do to debug your problem and find a solution 在为您的特定问题提供更多信息之前,您可以执行以下一些可能相关的操作来调试问题并找到解决方案
the searchBox is appearing for all places on my app but I want to make it appear just for one directive in particular
searchBox出现在我应用程序的所有位置,但我想使其仅出现在一个指令上
The combination of the name of the directive + its restriction might cause the directive to appear in unwanted locations. 指令名称及其限制的组合可能会导致指令出现在不需要的位置。
More information on restrict
if needed . 有关
restrict
更多信息(如果需要) 。
So for example, if you have a directive called 'breadcrumblistParentLink', which is restricted to C
(class) - you might find it in undesired locations since you're also using this class to style some elements on your page. 因此,例如,如果您有一个名为“ breadcrumblistParentLink”的指令(仅限于
C
(类)),则可能会在不希望的位置找到它,因为您还使用此类来设置页面上某些元素的样式。
If that's the case, you might find it helpful restricting directives to attributes and elements and giving some unique names. 如果是这种情况,您可能会发现将指令限制为属性和元素并提供一些唯一名称很有帮助。
I would also like to refer to your question 我也想参考你的问题
just "ng-show" this particular searchbox with a condition, but I don't know exactly how to do that
只是用条件“ ng-show”这个特定的搜索框,但是我不知道该怎么做
If you want a specific behavior for one instance of a directive, there are multiple ways to do that. 如果您想要某个指令实例的特定行为,可以通过多种方法来实现。
Most common is passing an attribute. 最常见的是传递属性。 For example, this is how you use it
例如,这就是您的使用方式
<div my-awesome-directive show-searchbox="true"></div>
And this is how you'd put show on the directive scope 这就是将show放在指令范围内的方式
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);
}
}
})
You can play around with it here: https://plnkr.co/edit/4MdNeEafbZjq2kEFKYAl?p=preview 您可以在这里试用: https : //plnkr.co/edit/4MdNeEafbZjq2kEFKYAl?p=preview
You can also look directive at attrs
variable ( attrs.showSearchBox
) and spare the binding in some cases. 您还可以在
attrs
变量( attrs.showSearchBox
)上查看指令,并在某些情况下attrs.showSearchBox
绑定。
For example: 例如:
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;
}
}
}
})
Note I am using a function on the scope. 注意我在示波器上使用了一个函数。
This function can also refer to the DOM and do something like $(element).is('[show-search-box]')
if you are more comfortable with jquery - but it is highly recommended to stick to angular way of doing things. 如果您更喜欢jquery,则此函数还可以引用DOM并执行类似
$(element).is('[show-search-box]')
-但强烈建议您坚持使用角度做事。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.