首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Ng-if在ng-template中不起作用

Ng-if在ng-template中不起作用
EN

Stack Overflow用户
提问于 2017-12-06 16:45:07
回答 1查看 595关注 0票数 0

我创建了一个组件,并试图使该组件的模板成为动态的,也就是说,在某些情况下,父标签应该是div,否则它应该是锚标签。

我一直在尝试使用ng-if,但不知何故它不起作用。这是一个代码片段。出于某些原因,即使ng-if为真,嵌套的.testThumbnail (.testDiv div )也将是未定义的,这将破坏我的组件。

我不明白为什么即使ng-if为真,它也找不到组件。我是Angular JS的新手,所以也许我在这里遗漏了什么?或者有一种更好的方法来根据某些条件动态创建组件的父标记。

代码语言:javascript
运行
复制
function myCardController($window) {
   var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined
}

angular.module('myApp').component('myCard', {
	templateUrl: 'testTemplate', ,
	controller: ["$window", myCardController],
});
代码语言:javascript
运行
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2017-12-06 18:20:50

您可能没有添加ng-app或ng-controller指令。使用以下HTML作为模板:

代码语言:javascript
运行
复制
<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代码,如下所示:

代码语言:javascript
运行
复制
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],
});

您还可以在body标记中使用ng-app="myApp“。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47670103

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档