我创建了一个组件,我正在尝试使组件的模板动态化,也就是说,对于某些条件,父标签应该是DIV,否则应该是锚定标签。p>我一直在尝试使用ng-,但它以某种方式无法使用。这是代码段。由于某种原因,即使NG-如果是正确的,则嵌套的Div(.testdiv .testthumbnail)也会不确定,这将破坏我的组件。
我不明白为什么即使ng-if为true,它也找不到组件。我是Angular JS的新手,所以也许我在这里错过了一些东西?或者有更好的方法可以根据某种条件动态创建组件的父标签。
function myCardController($window) {
var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined
}
angular.module('myApp').component('myCard', {
templateUrl: 'testTemplate', ,
controller: ["$window", myCardController],
});
<script type="text/ng-template" id="testTemplate">
<div ng-if="true"
class="testDiv">
<div role="img" class="testThumbnail"></div>
</div>
<a ng-if="false" class="tesstDiv">same content</a>
</script>
您可能会错过添加 ng-app 或 ng-controller 指令。使用以下html作为模板:
<div ng-controller = "myCardController">
<div ng-if="show"
class="testDiv">
<div role="img" class="testThumbnail"></div>
</div>
<a ng-if="!show" class="tesstDiv">same content</a>
</div>
像这样更新您的JS代码:
function myCardController($window) {
var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined
$scope.show = true;
}
angular.module('myApp').component('myCard', {
templateUrl: 'testTemplate.html', ,
controller: ["$window", myCardController],
});
您还可以在身体标签中使用 ng-app =" myApp" 。