Javascript AngularJS无法访问变量差异文件_Javascript_Angularjs

Javascript AngularJS无法访问变量差异文件

javascript angularjs

Javascript AngularJS无法访问变量差异文件,javascript,angularjs,Javascript,Angularjs,我是新来安格拉斯的。我刚开始学习依赖项的概念。但当我在app.js和formapp.js之间分离文件时遇到了问题。我无法访问用户变量，因为它的文件是分开的。我如何访问该变量？我希望你们能帮助我解决这个问题。提前谢谢你们 index.html <!DOCTYPE html> <html ng-app="training"> <head> <link rel="stylesheet" type="text/css" href="../bootst

我是新来安格拉斯的。我刚开始学习依赖项的概念。但当我在

app.js

和

formapp.js

之间分离文件时遇到了问题。我无法访问

用户

变量，因为它的文件是分开的。我如何访问该变量？我希望你们能帮助我解决这个问题。提前谢谢你们

index.html

<!DOCTYPE html>
<html ng-app="training">
  <head>
    <link rel="stylesheet" type="text/css" href="../bootstrap.min.css" />
    <script type="text/javascript" src="../angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="formapp.js"></script>

        <link rel="stylesheet" href="../style.css" />
  </head>

  <body ng-controller="UserController as usersCtrl">

    <h3>User Information</h3>
    <div ng-repeat="user in usersCtrl.mUsers">
        <p><ul>
            <li>{{user.name}}</li>
            <li>{{user.age}}</li>
            <li>{{user.occupation}}</li>
        </ul></p>
    </div> 

    <form-Directive></form-Directive>

  </body>

</html>

<form-Directive users='mUsers'></form-Directive>

formapp.js

(function(){

    var app = angular.module('training',['form']);


    app.controller('UserController',function(){

        this.mUsers = users;
    });

    var users = [{
        name:"michael",
        age:"27",
        occupation:"business"
    },{
        name:"john",
        age:"25",
        occupation:"police"
    }];

})();

(function(){
    var app = angular.module("form",[]);
        app.directive('formDirective', function(){
        return{
            restrict: 'E',
            templateUrl: 'user-form-directive.html',
            controller:function(){
                this.newUser = {};

                this.addUser = function(){
                    users.push(this.newUser);      //<-- users is not defined
                    this.newUser = {};
                };
            },
            controllerAs: 'formCtrl'
        };
    });
})();

(function(){
var app = angular.module("form",[]);
    app.directive('formDirective', function(){
    return{
        restrict: 'E',
        templateUrl: 'user-form-directive.html',
        scope: {
           users: '='
        },
        controller:['$scope', function($scope){
            this.newUser = {};

            this.addUser = function(){
                $scope.users.push(this.newUser);      //<-- users is not defined
                this.newUser = {};
            };
        }]
    };
});
})();

（函数（）{
var app=angular.module（“form”，[]）；
app.directive（'formDirective'，function（）{
返回{
限制：'E'，
templateUrl:'user form directive.html'，
控制器：函数（）{
this.newUser={}；
this.addUser=函数（）{
users.push（this.newUser）；//您可以将mUsers作为属性传递给元素指令-formDirective
index.html
<!DOCTYPE html>
<html ng-app="training">
  <head>
    <link rel="stylesheet" type="text/css" href="../bootstrap.min.css" />
    <script type="text/javascript" src="../angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="formapp.js"></script>

        <link rel="stylesheet" href="../style.css" />
  </head>

  <body ng-controller="UserController as usersCtrl">

    <h3>User Information</h3>
    <div ng-repeat="user in usersCtrl.mUsers">
        <p><ul>
            <li>{{user.name}}</li>
            <li>{{user.age}}</li>
            <li>{{user.occupation}}</li>
        </ul></p>
    </div> 

    <form-Directive></form-Directive>

  </body>

</html>

<form-Directive users='mUsers'></form-Directive>



formapp.js
(function(){

    var app = angular.module('training',['form']);


    app.controller('UserController',function(){

        this.mUsers = users;
    });

    var users = [{
        name:"michael",
        age:"27",
        occupation:"business"
    },{
        name:"john",
        age:"25",
        occupation:"police"
    }];

})();

(function(){
    var app = angular.module("form",[]);
        app.directive('formDirective', function(){
        return{
            restrict: 'E',
            templateUrl: 'user-form-directive.html',
            controller:function(){
                this.newUser = {};

                this.addUser = function(){
                    users.push(this.newUser);      //<-- users is not defined
                    this.newUser = {};
                };
            },
            controllerAs: 'formCtrl'
        };
    });
})();

(function(){
var app = angular.module("form",[]);
    app.directive('formDirective', function(){
    return{
        restrict: 'E',
        templateUrl: 'user-form-directive.html',
        scope: {
           users: '='
        },
        controller:['$scope', function($scope){
            this.newUser = {};

            this.addUser = function(){
                $scope.users.push(this.newUser);      //<-- users is not defined
                this.newUser = {};
            };
        }]
    };
});
})();

（函数（）{
var app=angular.module（“form”，[]）；
app.directive（'formDirective'，function（）{
返回{
限制：'E'，
templateUrl:'user form directive.html'，
范围：{
用户：'='
},
控制器：['$scope'，函数（$scope）{
this.newUser={}；
this.addUser=函数（）{
$scope.users.push（this.newUser）；//您可以将mUsers作为属性传递给元素指令-formDirective
index.html
<!DOCTYPE html>
<html ng-app="training">
  <head>
    <link rel="stylesheet" type="text/css" href="../bootstrap.min.css" />
    <script type="text/javascript" src="../angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="formapp.js"></script>

        <link rel="stylesheet" href="../style.css" />
  </head>

  <body ng-controller="UserController as usersCtrl">

    <h3>User Information</h3>
    <div ng-repeat="user in usersCtrl.mUsers">
        <p><ul>
            <li>{{user.name}}</li>
            <li>{{user.age}}</li>
            <li>{{user.occupation}}</li>
        </ul></p>
    </div> 

    <form-Directive></form-Directive>

  </body>

</html>

<form-Directive users='mUsers'></form-Directive>



formapp.js
(function(){

    var app = angular.module('training',['form']);


    app.controller('UserController',function(){

        this.mUsers = users;
    });

    var users = [{
        name:"michael",
        age:"27",
        occupation:"business"
    },{
        name:"john",
        age:"25",
        occupation:"police"
    }];

})();

(function(){
    var app = angular.module("form",[]);
        app.directive('formDirective', function(){
        return{
            restrict: 'E',
            templateUrl: 'user-form-directive.html',
            controller:function(){
                this.newUser = {};

                this.addUser = function(){
                    users.push(this.newUser);      //<-- users is not defined
                    this.newUser = {};
                };
            },
            controllerAs: 'formCtrl'
        };
    });
})();

(function(){
var app = angular.module("form",[]);
    app.directive('formDirective', function(){
    return{
        restrict: 'E',
        templateUrl: 'user-form-directive.html',
        scope: {
           users: '='
        },
        controller:['$scope', function($scope){
            this.newUser = {};

            this.addUser = function(){
                $scope.users.push(this.newUser);      //<-- users is not defined
                this.newUser = {};
            };
        }]
    };
});
})();

（函数（）{
var app=angular.module（“form”，[]）；
app.directive（'formDirective'，function（）{
返回{
限制：'E'，
templateUrl:'user form directive.html'，
范围：{
用户：'='
},
控制器：['$scope'，函数（$scope）{
this.newUser={}；
this.addUser=函数（）{
$scope.users.push（this.newUser）；//您应该通过属性绑定将用户传递给指令，否则您将在两个模块之间创建循环依赖关系您应该通过属性绑定将用户传递给指令，否则您将在两个模块之间创建循环依赖关系