我无法调用控制器中的方法adddepartment。我从myCreateDialog.html调用此方法。
我在第一个指令下的第二个指令。我可以从myDept指令调用控制器中的departments方法。但无法从adddepartment指令调用控制器的myCreateDialog方法。
我如何称呼此方法？
myApp.controller('departmentController', ['$scope', 'departmentService' ,
function ($scope, departmentService) {
$scope.departments = departmentService.departments;
var a, b;
//Add New Department
$scope.adddepartment = function (emps) {
departmentService.adddepartment(depts);
$scope.depts = "";
};
}]);
myApp.directive("myDept", function () {
return {
restrict: "E",
scope:{
department:"="
},
templateUrl: 'Template/Alldepartment.html',
replace: false,
transclude:true,
link: function (scope, element, attrs, controller) {}
};
});
myApp.directive("myCreateDialog", function () {
return {
restrict: "E",
scope:{
adddepartment: "&"
},
templateUrl: 'Template/myCreateDialog.html',
link: function (scope, element, attrs, controller) {
}
};
});
App.js
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Employee', {
templateUrl: 'Template/Employee.html',
controller: 'employeeController'
}).
when('/Department', {
templateUrl: 'Template/Department.html',
controller: 'departmentController'
})
}]);
Department.html
<my-dept department="departments">
<p>This text is coming by transclude</p>
</my-dept>
Alldepartment.html
<div>
<div class='myTransclude' ng-transclude></div>
<button class="btn btn-success" data-toggle="modal" data-target="#crtdept">
<span class="glyphicon glyphicon-plus-sign"></span> Create New Department
</button>
</div><br />
<!--Display department data into table-->
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover ">
<thead>
<tr class="success ">
<th>Id</th>
<th>Name</th>
<th>Technology</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dept in department">
<td>{{dept.id}}</td>
<td>{{dept.name}}</td>
<td>{{dept.technology}}</td>
<td>
<button class="btn btn-link" title="Edit" data-toggle="modal" data-target="#editemp" ng-click="empedit(employee,employees.indexOf(employee))">
<span class="text-warning glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-link" ng-click="deleteemp(employees.indexOf(employee))">
<span class=" text-danger glyphicon glyphicon-trash "> Delete</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--myCreateDialog directive for showing dialog for creating department-->
<my-create-dialog adddepartment="adddepartment(depts)"></my-create-dialog>
myCreateDialog.html
<div class="modal fade" id="crtdept">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" style="color:red" class=" close" data-dismiss="modal"> ×</button>
<h4 class="modal-title">Create Employee</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" data-toggle="validator" role="form" ng-submit="adddepartment(emps)">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10 has-success">
<input type="text" class="form-control" placeholder="Enter Your Name" ng-model="emps.empnames" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10 has-success">
<input type="email" class="form-control" id="email" placeholder="Enter Your email" ng-model="emps.empemails" required>
</div>
</div>
<div class=" form-group">
<label class="control-label col-sm-2">City:</label>
<div class="col-sm-10 has-success">
<input type="text" class="form-control" placeholder="Enter Your City" ng-model="emps.empcitys" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Department:</label>
<div class="col-sm-10 has-success">
<input type="text" class="form-control" placeholder="Enter your Department" ng-model="emps.empdepts" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Technology:</label>
<div class="col-sm-10 has-success">
<input type="text" class="form-control" placeholder="Enter your Technology" ng-model="emps.emptechs" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon glyphicon-ok"></span> Create</button>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以将departmentService注入您的指令并从那里调用
myApp.directive("myCreateDialog", function (departmentService) {
return {
restrict: "E",
templateUrl: 'Template/myCreateDialog.html',
link: function (scope, element, attrs, controller) {
scope.adddepartment = function (emps) {
departmentService.adddepartment(depts);
scope.depts = "";
};
}
};
});