好的,我有一个带有自己的 app.js 的子窗口。首先,这是处理子窗口、分离逻辑的最佳方式吗?
我遇到的问题是,虽然孩子的控制器工作正常,但指令却没有。我在父模块的单独模块中定义了相同的指令,并且效果很好。
子 HTML:
<!doctype html>
<html lang="en" data-ng-app="evidentia-child">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/app.css"/>
<title>Evidentia Claims Editor</title>
</head>
<body>
<div style='width:100%' data-ng-controller='miniEditorController'>
<textarea data-ng-model='data.editorText'
data-on-keyup="handleKeyup"
style='height:4em;width:24.5em;'>{{data.editorText}}</textarea>
<button type='button' style='float:right;margin-top:1.2em;'
data-ng-disabled='data.disabled'
data-ng-click='sendClaim();'>
<img src='img/add16x16.png' width='16'/></button>
</div>
<script type="text/javascript" src="lib/jquery-1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jqueryui-1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/MiniEditorController.js"></script>
<script type="text/javascript" src="js/app-child.js"></script>
</body>
</html>
应用程序-child.js:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('evidentia-child', [])
.directive('onKeyup', function() {
return function(scope, elm, attrs) {
//Evaluate the variable that was passed
//In this case we're just passing a variable that points
//to a function we'll call each keyup
var keyupFn = scope.$eval(attrs.onKeyup);
elm.bind('keyup', function(evt) {
//$apply makes sure that angular knows
//we're changing something
scope.$apply(function() {
keyupFn.call(scope, evt);
});
});
};
})
.controller('miniEditorController', ['$scope', MiniEditorController]);
控制器:
function MiniEditorController($scope) {
$scope.data = {};
$scope.data.disabled = true;
$scope.sendClaim = function() {
if ($scope.data.editorText.length > 0) {
window.opener.scope.$broadcast('newclaim', $scope.data.editorText);
$scope.data.editorText = '';
}
};
$scope.handleKeyup = function($event) {
if ($scope.data.editorText.length > 0) {
$scope.data.disabled = false;
} else {
$scope.data.disabled = true;
}
if ($event.ctrlKey && $event.keyCode === 13) {
$scope.sendClaim(id);
}
};
}