角-开关开关电视

Question

请看这个jsFiddle

在这个小提琴，我有两个html div，其中包含广告放置。我想用角切换它们，在一个实例中，Ad 1将显示，而在另一个实例中，Ad 2将显示。注意，在每个div中，我都有Javascript内容，我也想打开/关闭这些内容。

我本质上想要更新视图。

HTML：

<div ng-controller="MyCntrl">
        <div id = "ad1" class = "ad1">
            AD 1
            <img src ="http://images.dailytech.com/frontpage/fp__Apple-100x100.png"></img>
            <script><!-- code here --></</script>
        </div>

        <div id = "ad2" class = "ad2">
            AD 2
            <img src ="http://fixmypod.ca/image/cache/data/NEWEST_Phones/Samsung_Galaxy_Note_2-100x100.jpg"></img>
            <script><!-- code here --></</script>
        </div>

</div>

角度：

var app = angular.module('HelloApp', []);

app.controller('MyCtrl',['$scope','$element', function($scope, $element) {

  $scope.changeView = function(ad){
      //make ad x show and the other ad hidden
   }

}]);

我怎么才能继续这么做？

Answer 1

只需使用ng-show代替类，并在作用域上使用布尔属性来触发div。

HTML：

<div ng-controller="MyCntrl">
    <div id="ad1" ng-show="toggle">
        AD 1
        <img src ="http://images.dailytech.com/frontpage/fp__Apple-100x100.png"></img>
        <script><!-- code here --></</script>
    </div>
    <div id="ad2" ng-show="!toggle">
        AD 2
        <img src ="http://fixmypod.ca/image/cache/data/NEWEST_Phones/Samsung_Galaxy_Note_2-100x100.jpg"></img>
        <script><!-- code here --></</script>
    </div>
</div>

角度：

var app = angular.module('HelloApp', []);

app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
    $scope.toggle = true;
    $scope.changeView = function(ad){
        $scope.toggle = !$scope.toggle;
    }
}]);

或者，您可以使用ng-include只呈现基于属性的模板。

HTML：

<div ng-controller="MyCntrl">
    <div ng-if="condition">
        <div ng-include="`template/path/ad1`"></div>
    </div>
    <div ng-if="!condition">
        <div ng-include="`template/path/ad2`"></div>
    </div>
</div>

Answer 2

你可以通过

• ngShow
• ngHide
• ngIf

控制器

$scope.myDiv=true;

视图

<div ng-show="myDiv">
  if true this will visible
</div>