Fatal编程技术网
  • angularjs/
  • Angularjs r控制器在视图中，您可能有如下代码： <div data-ng-controller="YourController as aliasOfYourController"> Your first pane is {{aliasOfYourController.panes[0]}} </div> 第一个窗格是{{aliasOfYourController.panes[0]}

Angularjs r控制器在视图中，您可能有如下代码： <div data-ng-controller="YourController as aliasOfYourController"> Your first pane is {{aliasOfYourController.panes[0]}} </div> 第一个窗格是{{aliasOfYourController.panes[0]}

angularjs

Angularjs r控制器在视图中，您可能有如下代码： <div data-ng-controller="YourController as aliasOfYourController"> Your first pane is {{aliasOfYourController.panes[0]}} </div> 第一个窗格是{{aliasOfYourController.panes[0]},angularjs,angularjs-scope,this,Angularjs,Angularjs Scope,This,我建议您阅读以下帖子： 它很好地描述了使用“Controller as”在“$scope”上公开变量的优点 我知道你问的是具体的方法，而不是变量，但我认为最好坚持一种技术并与之保持一致 因此，在我看来，由于本文中讨论的变量问题，最好只使用“Controller as”技术并将其应用于方法。$scope的“this”与控制器的“this”不同。因此，如果在控制器中放置console.log（this），它将为您提供一个对象（Controller）和这个.addPane（）将addPane方法添加

我建议您阅读以下帖子：

它很好地描述了使用“Controller as”在“$scope”上公开变量的优点

我知道你问的是具体的方法，而不是变量，但我认为最好坚持一种技术并与之保持一致

因此，在我看来，由于本文中讨论的变量问题，最好只使用“Controller as”技术并将其应用于方法。

$scope的“this”与控制器的“this”不同。因此，如果在控制器中放置console.log（this），它将为您提供一个对象（Controller）和这个.addPane（）将addPane方法添加到控制器对象。但是$scope有不同的作用域，其作用域中的所有方法都需要由$scope.methodName（）访问。 
this.methodName（）
在控制器内部意味着在控制器对象内部添加methodos。
$scope.functionName（）
在HTML和内部

$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}
在编辑器中粘贴此代码并打开控制台以查看

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>


这是$sope vs控制器
var-app=angular.module（“myApp”，[]）；
应用控制器（“CtrlexSample”，函数（$scope）{
log（“ctrl‘this’”，this）；
//控制器的此（对象）与$scope不同
$scope.firstName=“Andy”；
$scope.lastName=“Bot”；
这个。昵称=“ABot”；
this.controllerMethod=函数（）{
log（“controllerMethod”，this）；
}
$scope.show=function（）{
log（$scope'this），this）；
//这是$scope的一部分
$scope.message=“欢迎用户”；
}
});
从$SCOPE提交：{{firstName}



从$SCOPE提交：{{lastName}



应来自控制器：{{昵称}

空白昵称是因为昵称附加到
控制器的“this”。





控制器方法



显示
{{message}}
谢谢您的解释。文档让人觉得控制器只是一个设置作用域的函数。如果所有动作都发生在作用域中，为什么控制器会被视为对象？为什么不将父作用域传递给链接函数呢？编辑：为了更好地表达这个问题，如果控制器方法和作用域方法都在同一个数据结构（作用域）上运行，为什么不将它们放在一个位置？似乎父作用域没有传递到lnk func中，因为希望支持“可重用组件，它们不应该意外地读取或修改父作用域中的数据。”但是，如果指令确实希望/需要读取或修改父作用域中的某些特定数据（如“pane”指令所做的），则需要付出一些努力：“require”所需父作用域所在的控制器，然后在该控制器上定义一个方法（使用“this”而不是$scope）来访问特定数据。由于所需的父作用域没有注入lnk func，我想这是唯一的方法。嘿，mark，修改指令的作用域实际上更容易。您只需使用链接功能，谢谢@Andy的帮助。在您的fiddle中，该指令没有创建新的作用域，因此我可以看到link函数如何在这里直接访问控制器的作用域（因为只有一个作用域）。选项卡和窗格指令使用隔离作用域（即，创建的新子作用域通常不从父作用域继承）。对于隔离作用域的情况，似乎在控制器上定义方法（使用“this”）是允许另一个指令（间接）访问另一个（隔离）作用域的唯一方法。我发现这也令人困惑。当一个视图指定一个控制器（例如，ng controller=“…”）时，与该控制器关联的$scope似乎会随之出现，因为该视图可以访问$scope属性。但是当一个指令“需要另一个控制器（然后在其链接功能中使用它）”时，与该另一个控制器关联的$scope不会随之出现？关于“以前的版本…”的令人困惑的引用现在已经删除了吗？那么可能会有更新？对于单元测试，如果使用“this”而不是“$scope”，则无法向控制器注入模拟作用域，因此无法进行单元测试。我认为使用“this”不是一个好的做法。@tamakisquare，我相信您引用的粗体文本适用于调用控制器构造函数时——即，当控制器被创建=与$scope关联时。以后，当任意JavaScript代码调用在$scope对象上定义的方法时，它不适用。请注意，现在可以直接在模板中调用addPane（）函数，方法是将控制器命名为：“MyController as myctrl”，然后命名为myctrl.addPane（）。这是一个非常有用的答案，但当我带着一个实际问题回来（）时，我无法解决它。因此，虽然这仍然是一个有用的答案，但我发现“固有复杂性”令人困惑。Javascript-很多绳子[绞死你自己]。读完本课程后，我立即被使用
$scope
的代码弄糊涂了，所以感谢您提及它。本课程根本没有提到$scope，他们只是使用
作为
和
这个
，那么它如何帮助解释差异呢？我第一次接触Angular是在前面提到的课程中，由于
$scope
从未被提及，我学会了在控制器中只使用
这个
。问题是，当您开始处理控制器中的承诺时，您对
this
有很多引用问题，并且必须开始执行类似
var me=this
的操作，以便从承诺返回函数中引用
this
中的模型。因此，我 
<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

return angular.extend($scope, this);

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>

$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>