我有一个指令。在指令模板中我提到ng-controller='LoginController'. In login Controller i have a function 'Initalize
函数每次弹出打开时都需要调用此函数如何从指令调用此函数???
var app = window.app;
app.directive('loginpop', function () {
return {
template: '<div id="loginPopup" class="modal fade loginPopup" ng-controller="LoginController">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" id="close" class="close" ng-click="closeFun()" data-dismiss="modal" aria-hidden="true"><img src="images/closeBtn.png" alt=""></button>' +
'<h2>Log In</h2>' +
'</div>' +
'<div class="modal-inner">' +
'<form class="form-horizontal Loginform" >' +
'<div class="control-group">' +
'<div id="loginErrormessage" ng-bind="loginErrormessage" ng-class="{loginErrorhidden:loginErrorStatus}" ></div>' +
'<div class="controls">' +
'<input type="text" id="inputTxt" name="username" placeholder="Enter your user name" ng-model="credentials.username" />' +
'</div>' +
'</div>' +
' <div class="control-group">' +
' <div class="controls">' +
' <input type="password" id="inputPassword" name="password" placeholder="Enter your Password" ng-model="credentials.password" />' +
' </div>' +
' </div>' +
' <div class="control-group">' +
' <div class="controls check-forget">' +
' <div class="checkbox">' +
' <input type="checkbox" id="checkbox" ng-model="rememberMe" />' +
' <label for="checkbox">Remember me</label>' +
' </div>' +
' <label class="forget">' +
' <a>Forget your password?</a>' +
' </label>' +
' </div>' +
' </div>' +
' <div class="control-group">' +
' <div class="controls">' +
' <button type="submit" class="btn yellowBtn" ng-click="login(credentials)" >log in</button>' +
' </div>' +
' </div>' +
' </form>' +
' <div class="join-content-wrap">' +
' <div class="social-wrap row">' +
' <div class="col-md-6 col-sm-6">' +
' <p>Or log in with:</p>' +
' <a href="javascript:;" class="fb-join" ng-click="facebookLogin()" >Facebook</a>' +
' <a href="javascript:;" class="twitter-join" >twitter</a>' +
' </div>' +
' <div class="col-md-6 col-sm-6">' +
' <p>Not a member yet?</p>' +
' <a ng-click="redirectTosignuppage()" class="join-now-wrap" >join now</a>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.visible, function(value){
if(value == true){
$(element).modal('show');
}
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
答案 0 :(得分:0)
将控制器定义为:
myApp.directive('helloWorld', function ($timeout) {
return {
/*
.
.
.
*/
controller: <controller>
/*
.
.
.
*/
};
}
看一下这个例子:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.text = "Any text";
}
function ChildCtrl($scope) {
$scope.init = function () {
$scope.demo = "This is a demo";
};
}
myApp.directive('helloWorld', function ($timeout) {
return {
restrict: 'E',
replace: true,
template: '<span ng-init="init()">Loading... {{demo}}</span>',
controller: ChildCtrl
};
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{text}}
<br/>
<hello-world/>
</div>
&#13;