javascript - AngularJS:为每个指令初始化一个 Controller

Question

我正在尝试创建一个指令“pForm”，以便我可以通过标签轻松地在 html 页面内创建表单实例:

<p-form></p-form>

每个表单都包含模板:templates/form.html连接到模块“forms”中 Controller “form”的实例。

话虽如此，我尝试的方法如下:

主模块(在依赖项 - 表单模块中):

angular.module('mainModule', ['forms'])

.controller('MainController', ['$scope', function($scope) {

}]);

表单模块:

angular.module("forms", [])

.controller("form", ['$scope', function($scope) {
    alert("init");
}])

.directive('pForm', function() {alert('directive');
    return {scope: {data: '=data'}, templateUrl: 'templates/form.html'};
});

html 文件初始化 ng-app="mainModule"，我在 html 正文中放置以下内容:

<p-form></p-form>

警报“指令”有效，但 Controller 未实例化(无“init”警报)。

我想我对指令的概念有些倒退了。请告诉我您的想法。

Answer 1

将您的指令更改为:

.directive('pForm',function(){alert('directive');
return {
    scope:{
       data: '=data'
    },
   templateUrl:'templates/form.html',
   controller: 'form'
};
});

将 Controller 与指令关联起来