Question

我要执行ng-include并仅在单击按钮后才显示内容。我尝试使用ng-if指令并在ng-model为true时显示div，但是在myFunction函数中他的值没有改变。

<div ng-controller='myCtrl'>
    <div ng-if='include==true' ng-include='"path"'></div>
    <input type="button" ng-click='myFuntion()'/>
</div>

.controller('myCtrl', function($scope){
    $scope.include = false;
    $scope.myFunction = function(){
        $scope.include = true;
    }
})

Answer 1

您的ng-click函数中有一个错字。 myFuntion应该是myFunction。您也可以只使用ng-if='include'而不是ng-if='include==true'。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.include = false;
     $scope.myFunction = function(){
        $scope.include = true;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-if='include'>Clicked</div>
  <input type="button" ng-click='myFunction()'/>
</div>

Answer 2

我只需创建一个函数即可更改有效路径的变量路径，而无需执行ng-if

$scope.myFunction = function(newPath){
      $scope.path = newPath;
}

<div ng-include="path"></div>
<input ng-click="myFunction('path/to/file.html')" type="button />"

单击按钮时执行ng-include-Angular.js

2 个答案: