gpt4 book ai didi

javascript - AngularJS 指令不起作用

转载 作者:可可西里 更新时间:2023-11-01 02:56:41 27 4
gpt4 key购买 nike

我在我的一个项目中使用 AngularJS,我想尝试创建指令。我已经学习了几个教程,但看不出哪里做错了。更糟糕的是,它不会显示任何错误或警告消息,但它也不会执行指令的功能。现在,我的代码几乎是这样的:

angular.module('components', []).directive('ngxOnshow', function() {
return {
restrict: 'A',
link: function(scope, element, attrs){
console.log("hello world")
//Resto do código da função
}
};
});
var module = angular.module('app', ['components']);

在 HTML 页面的正文中,我有这个:

<body ng-autobind ng-app="app">

但是,当我使用该指令时,它不起作用。

<div ng-show="showApp == true" ngx-onshow="showAppBar()">
</div>

应用程序的其余部分工作正常,绑定(bind)、默认指令,除此之外的所有内容。也许我遗漏了什么?

谢谢,烧焦:)

最佳答案

使用“&”允许指令执行在父作用域中定义的表达式/函数。 $观察一个内插的隔离范围属性(即,用“@”定义的包含 {{}} 的属性)以确定它何时更改:

myApp.directive('ngxOnshow', function () {
return {
restrict: 'A',
scope: {
showApp: '@',
ngxOnshow: '&'
},
link: function (scope, element, attrs) {
console.log("inside link function")
attrs.$observe('showApp', function (newValue) {
newValue === "true" && scope.ngxOnshow()
})
}
};
});

newValue 与 "true" 而非 true 进行比较,因为内插值始终是字符串。

HTML:

<div ng-show="showApp == true" show-app="{{showApp}}" ngx-Onshow="showAppBar()">

Fiddle .

关于javascript - AngularJS 指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14326077/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com