템플릿에서 ng-click을 사용하여 사용자 지정 지시문에서 모달을 열고 diretives 컨트롤러에 일부 양식 매개 변수를 보낸 다음 서비스를 호출하려고합니다. 나는 그것을 가지고 plunker ,하지만 난 NG 클릭에서 분명히 지침을 얻을 수 없습니다.
나는 $ scope를 사용할 수 있고 이것에 대해 격리 된 범위를 사용할 수 없다고 생각했지만 이와 같은 것에 대한 올바른 구조를 확신하지 못합니다. 이 모든 것을 구성 요소로 만들어야하므로 사용자 지정 지시문을 사용하고 있습니다.
나는 다소 비슷한 것들을 많이 보았지만 정확히 내가하려는 것은 아닙니다. 이 작업을 수행하는 방법과 내가 여기서 뭘 잘못하고 있는지에 대한 올바른 구조에 대한 아이디어가 있습니까?
지금까지 가지고있는 코드는 다음과 같습니다.
index.html
<head>
<link data-require="[email protected]" data-semver="0.6.1" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css" />
<script data-require="[email protected]" data-semver="0.6.1" src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script data-require="[email protected]" data-semver="0.6.1" src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<my-directive></my-directive>
<div align="center">
<md-button class="md-raised" ng-click="openLogin()">Login</md-button>
</div>
</body>
</html>
myDialog
<md-dialog>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools" layout="row" layout-align="space-between center">
<h2 class="md-flex">Login</h2>
<md-button class="md-icon-button md-accent md-hue-2" aria-label="Close" ng-click="closeDialog()">
<md-icon md-primary md-svg-icon="assets/images/ic_close_24px.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-content class="sticky-container">
<div class="dialog-content">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="login.username">
<label for="password">Password:</label>
<input type="password" id="password" ng-model="login.password">
<br><br>
<div>
<md-button id="btnCancel" class="input-lg md-raised md-accent" type="cancel" flex>Cancel</md-button>
<md-button id="btnSubmit" class="input-lg md-raised md-accent" type="submit" ng-submit="submit(login)" flex>Login</md-button>
</div>
</div>
</md-content>
</md-dialog>
script.js
// Code goes here
var app = angular.module('app', []);
app.directive('myDirective', function() {
return {
restrict: 'E',
controller: loginController,
template: '<div></div>'
};
loginController.$inject = ['$scope', '$mdDialog'];
function loginController($scope, $mdDialog) {
$scope.openDialog = function(){
$mdDialog.show({
controller: function($scope, $mdDialog){
// do something with dialog scope
console.log("username is: " + $scope.username);
console.log("password is: " + $scope.password);
//TODO Call service function to authenticate.
},
templateUrl: 'myDialog.html'
});
}
}
});
다음과 같이 앱에 머티리얼 디자인을 포함해야합니다.
var app = angular.module('plunker', ['ngMaterial']);
다음과 같이 컨트롤러를 연결해야합니다.
<body ng-controller="MainCtrl">
모달을 열려면 이상한 지시문 동작이 필요하지 않습니다. 컨트롤러에서 열 수 있지만 실제로 지시문을 원한다면 여기에 지시문이 작동합니다 (플 런커에도 포함됨).
app.directive('myDirective', ['$rootScope', '$mdDialog', function($rootScope, $mdDialog){
return{
restrict: 'E',
scope: {},
template: '<md-button ng-click="openLogin()" class="md-raised md-primary">Login(Directive)</md-button>',
link: function (scope, element, attrs, model) {
scope.openLogin = function(){
var modalScope = $rootScope.$new();
$mdDialog.show({
scope: modalScope,
templateUrl: 'myDialog.html',
clickOutsideToClose: true,
parent: angular.element(document.body),
}).then(function (result) {
//result contains username and password
}, function(){
//modal exited/cancelled
});
}
}
};
}]);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다