Javascript $scope在ng click处理程序中不可见

考虑以下控制器

angular.module('app')
    .controller('formCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.var = 1;

        $scope.updateData = function () {
            debugger; // <-- $scope is undefined here!
        }
    }]);

模板如下所示

<form class="form-horizontal" ng-controller="formCtrl as controller">
    <input type="button" value="BTN" class="btn btn-success" ng-click="updateData()">
</form>

当我点击按钮进入控制器时，这似乎不是常见的问题（至少我没有在谷歌等网站上找到类似的东西）。同时，

这个

应该等于

$scope

如何使

$scope

在

更新数据中可见

PS.
angular
版本为
1.6.5

更新。我已将指令名称从
表单
更改为
表单
，改为上述模板
form
绝对不是一个directive的最佳名称，但它不是我在项目中使用的名称，它是这个问题名称的一个糟糕简化。因此，问题不是由directive的名称引起的，主要问题是您的指令元素匹配。这是一个无限循环，因为您的指令模板还包括指令元素
form
。所以你的指令一次又一次地被绑定

请选中此runnable，并重命名您的指令元素。不要使用
表单
或修改模板并外包
表单
元素。您也不需要在表单元素中定义
ng控制器
，而控制器是由
controller:'formCtrl'
附近的指令定义的

看法


AngularJS应用程序
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'formCtrl'，函数（$scope）{
$scope.btn='btn'；
$scope.updateData=函数（）{
$scope.btn='btn clicked'；
}
});
myApp.directive（'myForm'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：“formCtrl”
}
});

由于问题更新而更新：
$scope
在
$scope
函数
updateData（）
中可用。请将你的解决方案与我的解决方案进行比较。
`
主要问题是指令元素匹配。这是一个无限循环，因为您的指令模板还包括指令元素
form
。所以你的指令一次又一次地被绑定

请选中此runnable，并重命名您的指令元素。不要使用
表单
或修改模板并外包
表单
元素。您也不需要在表单元素中定义
ng控制器
，而控制器是由
controller:'formCtrl'
附近的指令定义的

看法


AngularJS应用程序
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'formCtrl'，函数（$scope）{
$scope.btn='btn'；
$scope.updateData=函数（）{
$scope.btn='btn clicked'；
}
});
myApp.directive（'myForm'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：“formCtrl”
}
});

由于问题更新而更新：
$scope
在
$scope
函数
updateData（）
中可用。请将你的解决方案与我的解决方案进行比较。
`
我不确定，但“var”可能是一个保留关键字。请尝试使用另一个变量名。@m1crdy否，作为对象属性，使用
var
.rename
.directive完全可以（'form'，…
到其他东西，因为指令可以采用
的形式，使
成为您的指令。顺便说一句，因为您一直在使用最新的AngularJS版本，因此使用它将更方便。这肯定不是模块依赖性的问题？
angular.module（'app'）
-
angular.module（'app'，[]）
我不确定，但“var”可能是一个保留关键字。请尝试使用另一个变量名。@m1crdy否，作为对象属性，使用
var
是完全可以的。重命名
.directive（'form'，…
到其他东西，因为指令可以采用
的形式，使
成为您的指令。顺便说一句，因为您一直在使用最新的AngularJS版本，因此使用它将更方便。这肯定不是模块依赖性的问题？
angular.module（'app'）
-
angular.module（'app'，[]）
我得出了相同的结论，但奇怪的是它在使用保留指令名形式时应该抛出一些错误，但是@Eugeny89没有引用这些东西。@Korte它确实抛出了一个错误。我想Eugeny89没有查看控制台。=）是的，我刚刚在一把小提琴上注意到了同样的事情，但我觉得还有别的事情在进行。谢谢，我已经更新了这个问题。
form
绝对不是一个directive的最佳名称，但它不是我在project中使用的名称，它是这个问题名称的一个糟糕的简化。所以这个问题不是由d的名称引起的irrective@Eugeny89我更新了我的答案。它应该对您有用。请将您的解决方案与我的解决方案进行比较。是否有任何错误抛出？请检查您的控制台。我得出了相同的结论，但奇怪的是，它应该在使用保留指令名形式时抛出一些错误，但@Eugeny89没有引用此类内容。@Korte它确实抛出了一个错误。我认为Eugeny89没有查看控制台是的，我刚刚在一把小提琴上注意到了同样的事情，但我觉得还有别的事情在进行。谢谢，我已经更新了这个问题。
form
绝对不是一个directive的最佳名称，但它不是我在project中使用的名称，它是这个问题名称的一个糟糕的简化。所以这个问题不是由d的名称引起的irrective@Eugeny89我更新了我的答案。它应该适用于您。请将您的解决方案与我的解决方案进行比较。是否引发任何错误？请检查您的控制台。
<form class="form-horizontal" ng-controller="formCtrl as controller">
    <input type="button" value="BTN" class="btn btn-success" ng-click="updateData()">
</form>

<div>
   <my-form></my-form>
</div>

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

myApp.controller('formCtrl', function ($scope) {

    $scope.btn = 'BTN';

    $scope.updateData = function () {
       $scope.btn = 'BTN clicked';
    }
});

myApp.directive('myForm', function () {
    return {
      restrict: 'E',
      replace: true,
      template: '<form class="form-horizontal"><input type="button" ng-value="btn" class="btn btn-success" ng-click="updateData()"></form>',
      controller: 'formCtrl'
    }
});