范围内更改包括html
问题描述:
所以我包括blog.html这是一个帖子列表,但当我尝试更改blog.html中的活动变量似乎范围已更改?范围内更改包括html
当我点击其中一个帖子时,测试点A将保持不变,但测试点B会改变。
发生了什么事?我怎样才能使它工作?
的index.html
<body ng-app="myApp" ng-controller="myController">
<nav id="mainNav">
<ul>
<li><a ng-click="active = 'views/blog.html'">Blog</a></li>
<li><a ng-click="active = 'views/about.html'">About</a></li>
<li><a ng-click="active = 'views/controlPanel.html'">Control Panel</a></li>
</ul>
</nav>
<div>
<div ng-include="active"></div>
</div>
{{active}} //Testing point A
</body>
blog.html
<ul id="posts">
<li class="post" ng-repeat="post in posts">
{{active}} //Testing point A
<a ng-click="active = 'views/about.html'">
<img src="{{post.image}}" />
<div class="text">
<h2>{{post.title}}</h2>
<p class="date">{{post.date}}</p>
</div>
</a>
</li>
</ul>
的script.js
angular.module('myApp', []).controller('myController', function ($scope, $http) {
$scope.active = 'views/blog.html';
$http.get("data.json").then(function (response) {
$scope.posts = response.data.posts;
});
});
答
回答你的问题是以及解决方案在这里详细阐述:Angular passing scope to ng-include
虽然,我不明白的一个想法是,你为什么要点击某些职位后将用户带到“about.html”页面。您应该为单个帖子分开发布博文页面。像“post.html”。这个模板应该包含在“blog.html”中。
'ng-include'是一个有自己范围的指令。您需要创建一个组件或指令 – Hoyen
@Hoyen,如果您使用angularjs nevradub