Angularjs Angular.js在ng include html模板中没有作用域_Angularjs_Angularjs Scope_Angularjs Ng Include

Angularjs Angular.js在ng include html模板中没有作用域

angularjs

Angularjs Angular.js在ng include html模板中没有作用域,angularjs,angularjs-scope,angularjs-ng-include,Angularjs,Angularjs Scope,Angularjs Ng Include,我正在学习我的第一个角度项目，遇到了一个问题目标：在使用ng include放置的给定.html模板中单击链接时，我希望它更改$scope.selectedLocation的值问题：$scope.selectedLocation的值不会更改我了解到ng include创建了一个子范围，因此为了更改父范围变量，可以将$parent放在值的前面。我试过这个，但它不起作用主索引页： <body ng-app="photoApp" id="bodyDiv" > <div

我正在学习我的第一个角度项目，遇到了一个问题

目标：在使用ng include放置的给定.html模板中单击链接时，我希望它更改$scope.selectedLocation的值

问题：$scope.selectedLocation的值不会更改

我了解到ng include创建了一个子范围，因此为了更改父范围变量，可以将$parent放在值的前面。我试过这个，但它不起作用

主索引页：

<body ng-app="photoApp" id="bodyDiv" >
    <div ng-controller="PhotoGallery">
        <div>
        <ng-switch on="selectedLocation" >
            <div ng-switch-when="home" >
                <div ng-include="'home.html'"></div>
            </div>
            <div ng-switch-when="loc1">
                <div ng-include="'file1.html'"></div>
            </div>
            <div ng-switch-when="loc2">
                <div ng-include="'file2.html'"></div>
            </div>
        </ng-switch>
        </div>
    </div>
</body>

问题是您正在绑定到继承范围中的基元。要修复它，您应该传递一个对象：

westonPhotographyApp.controller('PhotoGallery', function($scope)
{
   $scope.vm = {
     selectedLocation: "home"
   }
}

Html

ng include

创建一个通过原型链继承父（控制器）范围的新范围。在javascript中，不能替换阴影继承属性的值。传递对象的过程与更改指向该对象的指针的属性的过程相同

您似乎将应用程序变量命名错误。名称

westonPhotographyApp

photoApp

或反之亦然：

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

photoApp.controller('PhotoGallery', function($scope) {
      $scope.selectedLocation ="home";
}

无论如何，您可以改进您的设计：您可以使用controllerAs语法。它命名您的控制器，并使其可在整个子代范围内访问：

索引：

<div ng-controller="PhotoGallery as pgCtrl">
  <div>
    <ng-switch on="selectedLocation" >
      <div ng-switch-when="home" >
        <div ng-include="'home.html'"></div>
        ...

使用“controller as”语法就成功了！我从中学到了很多，谢谢！

<div class="container-fluid">
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <a href="#" ng-click="vm.selectedLocation='loc1'">
            Location 1
        </a>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <a href="#" ng-click="vm.selectedLocation='loc2'">
            Location 2
        </a>
    </div>
</div>

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

photoApp.controller('PhotoGallery', function($scope) {
      $scope.selectedLocation ="home";
}

<div ng-controller="PhotoGallery as pgCtrl">
  <div>
    <ng-switch on="selectedLocation" >
      <div ng-switch-when="home" >
        <div ng-include="'home.html'"></div>
        ...

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
                Location 1
            </a>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
                Location 2
            </a>
        </div>
    </div>
</div>

photoApp.controller('PhotoGallery', function() {
    var vm = this;

    vm.selectedLocation ="home";
}