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

Question

这个问题已经有答案了:

Why does Chrome debugger think closed local variable is undefined? (7 个回答)

已关闭 5 年前。

考虑以下 Controller

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

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

指令如下...

angular.module('app')
    .directive('formL', function() {
        return {
            restrict: 'E',
            scope: {
                items: '=info'
            },
            controller: 'formCtrl',
            templateUrl: 'js/form/form.html'
        };
    });

模板如下

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

当我按下按钮并进入 Controller $scope时，这似乎不是常见问题(至少我没有在Google和SO上找到类似的东西)是 undefined 。同时this等于$scope正如它应该的那样。

我该怎么做才能使 $scope内部可见updateData ？

附注。 angular版本是1.6.5

更新。我已将指令名称从 form 更改为至formL进入上面的模板。 form绝对不是指令的最佳名称，但这不是我在项目中使用的名称，这是这个问题名称的糟糕简化。所以问题不是由指令名称引起的

Answer 1

主要问题是指令元素匹配。这是一个无限循环，因为您的指令模板还包含指令元素 form。所以你的指令一次又一次地受到约束。

请检查此可运行 DEMO FIDDLE 并重命名您的指令元素。不要使用 form 或修改模板并外包 form 元素。您也不需要在表单元素内定义 ng-controller，而您的 Controller 是由 controller: 'formCtrl' 附近的指令定义的。

查看

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

AngularJS 应用程序

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'
    }
});

由于问题更新而更新:

$scope 可在 $scope 函数 updateData() 中使用。请比较您的解决方案和我上面的解决方案。`