Question

好的，我有一个带有自己的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>

APP-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);
    }
};

}

AngularJS配置子窗口（指令不工作）

0 个答案: