ng-if是否适用于img标签

时间:2017-02-16 05:16:31

标签: html angularjs

当我在图片标签

中使用ng-if时,此代码是否有效

index.html

<img class="image" src="location.png" ng-click="openModal('locationPage')" ng-model="location" ng-init="location = true">
<img class="image" src="weather.png" ng-click="openModal('weatherPage')" ng-model="weather" ng-init="weather = true">

location.html

<div ng-if="location">
     <h2>Latitude: {{lat}}</h2>
     h2>Longitute: {{long}}</h2>
</div>
<div ng-if="weather">
    <div class="list card">
        <div class="item item-body">
          <h1 class="">{{weather.name}}</h1>
          <p class="temparature" ng-bind="{{weather.main.temp}}">Temperature: </p>
          <p class="temparature">Temperature:{{weather.main.temp_min}}</p>
          <p class="temparature">{{weather.main.temp_max}}</p>
          <p class="temparature">{{weather.main.pressure}}</p>
          <p class="temparature">{{weather.wind.speed}}</p>
          <p class="temparature">{{weather.main.humidity}}</p>
        </div>
    </div>
</div>`

2 个答案:

答案 0 :(得分:1)

我认为更好的方法是你可以点击$和位置控制器中的$ on。

index.html中的

<img class="image" src="location.png" ng-click="openModal('locationPage'); $broadcast('type', 'location')">
<img class="image" src="weather.png" ng-click="openModal('weatherPage'); $broadcast('type', 'weather')">

并在location.html的控制器中:

$scope.$on('type', function(e, type) {
  $scope.selectedType = type;
});

和location.html中的一个小变化

<div ng-if="selectedType === 'location'">
     <h2>Latitude: {{lat}}</h2>
     h2>Longitute: {{long}}</h2>
</div>
<div ng-if="selectedType === 'weather'">
    <div class="list card">
        <div class="item item-body">
          <h1 class="">{{weather.name}}</h1>
          <p class="temparature" ng-bind="{{weather.main.temp}}">Temperature: </p>
          <p class="temparature">Temperature:{{weather.main.temp_min}}</p>
          <p class="temparature">{{weather.main.temp_max}}</p>
          <p class="temparature">{{weather.main.pressure}}</p>
          <p class="temparature">{{weather.wind.speed}}</p>
          <p class="temparature">{{weather.main.humidity}}</p>
        </div>
    </div>
</div>

答案 1 :(得分:1)

像这样改变,

matrix.m41

如果要初始化这些值,请在控制器中执行此操作。