Question

考虑以下控制器

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

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

dirrective如下......

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>

这似乎不是常见的问题（至少我没有在Google和SO上找到类似的东西），当我点击按钮并进入控制器$scope时undefined。同时this等于$scope。

我应该怎样做才能在$scope内看到updateData？

PS。 angular版本为1.6.5

更新。我已将指令名称从form更改为formL到上面的模板中。 form定义并不是dirrective的最佳名称，但它不是我在项目中的名称，这是对这个问题的名称的简单简化。所以这个问题不是由dirrective的名字引起的。

Answer 1

主要问题是你的指令元素匹配。它是一个无限循环，因为您的指令模板还包含指令元素form。所以你的指令一次又一次地被绑定。

请检查此runnable DEMO FIDDLE 并重命名您的指令元素。不要使用form或修改模板并外包ng-controller元素。您也不需要在表单元素中定义controller: 'formCtrl'，而您的控制器由<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'
    }
});

AngularJS应用程序

$scope

由于问题更新而更新：

您可以在$scope函数updateData()中找到

{{1}}。请比较一下我的解决方案。 `

在ng-click处理程序中看不到$ scope

1 个答案:

视图

AngularJS应用程序

由于问题更新而更新：