Question

我创建了一个组件，我试图让组件的模板动态化，也就是说，对于某些条件，父标签应该是div，否则它应该是一个锚标签。

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

即使ng-if为真，我也无法理解为什么它找不到该组件。我是Angular JS的新手，所以也许我在这里遗漏了一些东西？或者有一种更好的方法可以根据某些条件动态创建组件的父标签。

＆＃13;

function myCardController($window) {
   var element = angular.element(document.querySelector('.testDiv .testThumbnail'));//is undefined
}

angular.module('myApp').component('myCard', {
	templateUrl: 'testTemplate', ,
	controller: ["$window", myCardController],
});

＆＃13;

<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>

＆＃13;

Answer 1

您可能会错过添加 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”。

Ng-如果在ng-template内部不起作用

1 个答案: