Question

我遇到了将ng-controller放在div中的问题，打破了其内部的绑定。我是Angular的新手，所以我一定做错了，请帮忙。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
  <title>Third Excercise</title>
</head>
<body>

<div ng-app>
  {{"Hello World"}}
  <div ng-controller="FirstCtrl">
    <h1>{{ data.message + " world" }}</h1>
    <div ng-class="data.message">
      test
    </div>
  </div>
</div>

<!-- Imports -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
  integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
  crossorigin="anonymous" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"
 charset="utf-8">
></script>
<!-- Local Files-->
<script src="js/third-excercise.js" charset="utf-8"></script>
</body>
</html>

JS：

function FirstCtrl($scope) {
  $scope.data = {message : "Hello"};
  //$scope.data.message = "Hello";
}

我在这里粘贴了我的代码： http://jsbin.com/yitezu/4/edit?html,js,output

Answer 1

第1步：将模块添加到ng-app指令

<div ng-app="myApp">
  {{"Hello World"}}
  <div ng-controller="FirstCtrl">

    <h1>{{ data.message + " world" }}</h1>
    <div ng-class="data.message">
      test
    </div>
  </div>
</div>

步骤2：在模块中注册控制器

angular.module('myApp', []);

angular.module('myApp')
.controller('FirstCtrl', FirstCtrl);

function FirstCtrl($scope) {
  $scope.data = {message : "Hello"}; 
}

AngularJs 1控制器和绑定问题

1 个答案: