Angular.js ng-include html 模板中没有范围

Question

我正在学习我的第一个 Angular 项目，并且运行遇到了问题。

目标： 当在给定的 .html 模板中单击 link 时，我希望它更改值共 $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>

home.html代码：

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

photoApp.js代码：

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

westonPhotographyApp.controller('PhotoGallery', function($scope)
{

    $scope.selectedLocation ="home";
}

Answer 1

问题是您要绑定到继承范围内的原语。要修复它，您应该传递一个对象：

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

Html

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

ng-include 创建一个新的作用域，它通过原型链继承父（控制器）作用域。在 javascript 中，您无法替换隐藏继承属性的值。传递对象的工作原理与更改指向对象的指针上的属性相同。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

您似乎错误地命名了您的应用程序变量。名称 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>
        ...

家：

<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";
}

Angular.js ng-include html 模板中没有范围

Angular.js no scope in ng-include html template

angularjs

angularjs-scope

angularjs-ng-include