$ scope范围问题

时间:2016-08-09 15:12:42

标签: javascript html angularjs angularjs-scope

我已经看到很多关于这个问题的问题,但我并不理解给出的答案。我看到了几个模块和控制器的例子,但是当我尝试它时,它没有用。

我从网站上复制代码以检查它是否适用于我,但它仍无效。

这是代码:



var myapp = angular.module("myapp", []);
myapp.controller("HelloCtrl", function($scope) {
  $scope.user = {
    name: "name123",
    nickName: "nickName123",

    callMe: function() {
      var userObject = $scope.user;
      return userObject.name + " Known as " + userObject.nickName;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
    <!--הטופס-->
    First Name:
    <input type="text" ng-model="user.name" />
    <br />Last Name:
    <input type="text" ng-model="user.nickName" />
    <br />

  </div>
</div>
{{user.callMe()}}
&#13;
&#13;
&#13;

当我调试代码时,这就是我得到的:

Screenshot of web form that has '{{user.callMe()}}' below the form fields.

3 个答案:

答案 0 :(得分:1)

{{user.callMe()}}应该包装到相应的控制器中。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
    <!--הטופס-->
    First Name:
    <input type="text" ng-model="user.name" />
    <br />Last Name:
    <input type="text" ng-model="user.nickName" />
    <br />{{user.callMe()}}
  </div>
</div>

<script>
  var myapp = angular.module("myapp", []);
  myapp.controller("HelloCtrl", function($scope) {
    $scope.user = {
      name: "name123",
      nickName: "nickName123",

      callMe: function() {
        var userObject = $scope.user;
        return userObject.name + " Known as " + userObject.nickName;
      }
    };
  });
</script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您的角度插值不在您的Angular应用程序中; - )

&#13;
&#13;
var myapp = angular.module("myapp", []);
myapp.controller("HelloCtrl",function($scope){
    $scope.user = {
        name: "name123",
        nickName: "nickName123",

        callMe: function(){
          console.log('called');
        var userObject = $scope.user;
        return userObject.name + " Known as " + userObject.nickName;
      }
    };
});

angular.element(document).ready(function() {
    angular.bootstrap(document.querySelector('#app'), ['myapp']);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div id="app" ng-controller="HelloCtrl">
        <!--הטופס-->
        First Name:<input type="text" ng-model="user.name" />
        <br />
        Last Name:<input type="text" ng-model="user.nickName" />
        <br />
{{user.callMe()}}
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您的插值应位于控制器div内,并添加对angular.js的引用

Object.defineProperty