Javascript AngularJS greetController控制器不工作_Javascript_Html_Angularjs

Javascript AngularJS greetController控制器不工作

javascript html angularjs

Javascript AngularJS greetController控制器不工作,javascript,html,angularjs,Javascript,Html,Angularjs,我正在学习AngularJS，我正在学习一个教程，我发现自己陷入了一个困境，因为我无法让greetController控制器工作以下是HTML： <!DOCTYPE html> <html> <head> <title>HTML.it</title> <script type="text/javascript" src="angular.min.js"></script> <scr

我正在学习AngularJS，我正在学习一个教程，我发现自己陷入了一个困境，因为我无法让

greetController

控制器工作

以下是HTML：

<!DOCTYPE html>
<html>
<head>
    <title>HTML.it</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="userController">
            <p>Name: <input type="text" ng-model="user.fname"></p>
            <p>Lastname: <input type="text" ng-model="user.lname"></p>
        </div>
        <div ng-controller="greetController">
            <h3>{{greet()}}</h3>
        </div>
    </div>
</body>
</html>

结果是“{{greet（）}}”没有输出

控制台显示：

无法读取未定义的属性“fname”

我想我的

user.fname

无法从greetController中读取，这是为什么？

$scope.user属于名为'userController'的控制器。

因此，它在“greetController”中未定义
您可以选择<代码> $ROOTSIONT/<代码>将用户声明为全局对象，或者考虑使用<强> >代码>服务< /代码> <强>在控制器之间共享变量。< /P> 一个简单的解决方案是使用相同的userController
使用单控制器

使用$rootScope
greetController
需要是
userController
控制器的子级才能工作。所以HTML必须是

<div ng-app="myApp"> <div ng-controller="userController"> <p>Name: <input type="text" ng-model="user.fname"></p> <p>Lastname: <input type="text" ng-model="user.lname"></p> <div ng-controller="greetController"> <h3>{{greet()}}</h3> </div> </div> </div>
HTML:

姓名：姓氏： {{greet（）}}

注意，现在两个模型
ngModel
和
{{{greet（）}
都在公共
userController
的范围内，因为$scope.user在greetController中不存在。 $scope.user是在userController中定义的，您正试图在greetController中访问它
在angular中，每个控制器都有自己的作用域，并且只从其父控制器继承属性
由于greetController和userController是兄弟，因此在其中定义的属性不会共享给另一个
使示例生效的最简单方法是将greetController设置为userController的子级，如下所示：

<div ng-app="myApp"> <div ng-controller="userController"> <p>Name: <input type="text" ng-model="user.fname"></p> <p>Lastname: <input type="text" ng-model="user.lname"></p> <div ng-controller="greetController"> <h3>{{greet()}}</h3> </div> </div> </div>

姓名：姓氏： {{greet（）}}
否则，它们应该为包含这两个控制器的控制器侦听的事件提供支持，以便两个控制器保持解耦谢谢。你能通过代码告诉我如何通过$rootScope完成它，以及如何使用服务吗？还有，哪一个最好？创建一个“globalController”并使其高于所有其他控制器是否更好？我已经更新了答案，据我所知，如果您在多个控制器之间共享数据，我会选择服务，如果不是单个控制器，将是最佳选择
app.controller('userController', function($scope) { $scope.user = {fname: "Joe", lname: "Black"}; $scope.greet = function () { return "Hi " + $scope.user.fname + ' ' + $scope.user.lname; }; });

<div ng-app="myApp" ng-controller="userController"> <div> <p>Name: <input type="text" ng-model="user.fname"></p> <p>Lastname: <input type="text" ng-model="user.lname"></p> </div> <div> <h3>{{greet()}}</h3> </div> </div>

<div ng-app="myApp"> <div ng-controller="userController"> <p>Name: <input type="text" ng-model="user.fname"></p> <p>Lastname: <input type="text" ng-model="user.lname"></p> <div ng-controller="greetController"> <h3>{{greet()}}</h3> </div> </div> </div>