javascript - Angularjs ng-include 不包括任何 View

标签 javascript angularjs

我一直尝试按如下方式设置我的 ng-include:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Demo</title>
  <script type="text/javascript" src="js/lib/angular.min.js"></script>
  <script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
  <script type="text/javascript" src="js/controllers/app.js"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
  <h1>Airports</h1>
  <div ng-controller="AppCtrl">
    <div>
      <div>
        <ul>
          <li ng-repeat="airport in airports">
            <a href="" ng-click="setAirport(airport.code)">
              {{airport.code}} - {{airport.name}}
            </a> -
            <a href="" ng-click="editAirport(airport.code)">
              Editar
            </a>
          </li>
        </ul>
        <p ng-show="currentAirport">Current airpot: {{currentAirport.name}}</p>
      </div>
      <!--el ng include le indica que puede incluir un scope (.html)-->
      <div ng-include src="formURL"></div>
    </div>
  </div>
</body>
</html>

我的 JS 脚本(app.js):

function AppCtrl ($scope){
    $scope.airports={
        "STL":{
            "code":"STL",
            "name":"Lambert-St Airport",
            "city":"san louis",
            "destinations": [
                "LAX",
                "MKE"
            ]
        }
    };
    $scope.formURL= 'partials/form.html';
    $scope.currentAirport = null;

    $scope.setAirport = function (code) {
        $scope.currentAirport = $scope.airports[code];
    };

    $scope.editAirport = function (code) {
        $scope.editing = $scope.airports[code];
    };
}

最后是 form.html

<div ng-show="editing">
    <h3>Edit Airport</h3>
    <input ng-model="editing.name" value="" class="input-xlarge"/>
</div>

我已经尝试显示表单、更改 url、编写完整的 url,但它似乎不起作用。虽然当我点击机场时,页面显示正确。

如果有人能给我指出正确的方向,那就太好了。很抱歉发了这么大的帖子,它需要一些解释才能使其连贯。希望这是有道理的。谢谢。

My directory:

exampleAngular
   |_css
   |_img
   |_js
   |_controllers
        |_app.js
   |_lib
        |_angular.min.js
        |_angular-resource.min.js
   |_partials
        |_form.html
        |_airport.html
   |_index.html 

最佳答案

Andyrooger 提供的 plunker 无需修改即可正常工作,但是您需要更改一些内容。

1) ng-include 在使用指令作为属性时没有使用src,所以应该是ng-include="formUrl"

2) 在 ng-show

上使用对象属性而不是整个对象

将 HTML 更改为,

<div ng-show="editing.airport">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>

还要注意范围继承,改变Controller

$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]

关于javascript - Angularjs ng-include 不包括任何 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20025695/

相关文章:

javascript - 如何在 Controller 中访问动态表单名称?

javascript - 当 firebug 说它是 34 时,为什么 jquery 会为 offsetHeight 返回 0?

javascript - 使用 node/express.js 的模块中的全局变量

javascript - Angularjs - 在指令内调用 Controller 函数

angularjs - 如何在 Angular 项目中编写源 API 文档,以便生成可以离线访问的 HTML 内容

javascript - 使用输入数据减去文件类型创建新的 formData

javascript - AngularJS 列表未显示 - 自定义过滤器有问题吗?

javascript - AngularJS $http.jsonp() 方法访问 Google map 距离矩阵 API

javascript - Angular $q 未按预期工作 - 返回未定义

javascript - ngRepeat 中简单指令和相同指令之间的空间不同