这个问题在这里已有答案:
考虑以下控制器
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>
这似乎不是常见的问题(至少我没有在谷歌和SO上找到类似的东西),当我点击按钮并进入控制器$scope
是undefined
。同时this
等于$scope
应该是。
我该怎么办才能让$scope
在updateData
中可见?
PS。 angular
版本是1.6.5
UPDATE。我将指令名从form
更改为formL
到上面的模板。 form
定义并不是dirrective的最佳名称,但它不是我在项目中的名称,这是对这个问题的名称的简单简化。所以问题不是由dirrective的名字引起的
主要问题是你的指令元素匹配。这是一个无限循环,因为您的指令模板还包含指令元素form
。所以你的指令一次又一次地被绑定。
请检查此runnable DEMO FIDDLE并重命名您的指令元素。不要使用form
或修改您的模板并外包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'
}
});
$scope
可以在你的$scope
函数updateData()
中找到。请比较一下我的解决方案。 `