14

我正在使用一个模板来创建一个弹出菜单，如果有一个新的并且它一直工作到现在，它将显示警报。但是我想添加手动警报，这就是为什么我想添加一个输入文本但是 Oupss，我不能在输入字段上写，我什至不知道为什么。输入字段有点禁用！！！

我的指令是这样的：

$scope.tb = { x: 0, y: 0 };

module.directive('myDraggable', function ($document, $interval) {
return {
    restrict: 'EA',
    replace: true,
    //scope : true,
    scope: { menu: '=drSrc'},
    link: function (scope, element, attr) {

        var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval;

        element.draggable({
            position: 'relative',
            cursor: 'pointer',
            top: y + 'px',
            left: x + 'px'
        });

        element.on('mousedown', function (event) {

            // Prevent default dragging of selected content
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
            $interval.cancel(moveInterval);
        });

        function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
            //calculate the borders of the document 
            width = $(document).width() - 350;
            height = $(document).height() - 150;
            positionX.push(x);
            positionY.push(y);
            time.push(Date.now());
        }
    }
}
 });

我试图使范围为真，但我遇到了 2 个问题：我不能再移动我的弹出窗口（是的，我的弹出菜单是可拖动的）而且输入文本也没有显示我正在输入的文本。

这是我的缓存模板：

    $templateCache.put('control.tpl.html', '<div class="container" my-draggable dr-src="tb"><div><div class="col-sm-1 col-md-1 sidebar"><div class="list-group" ><span href="#" class="list-group-item active" >Manage<input type="text" class="pull-right" placeholder="Type..." /></span><div ng-repeat="Alert in Alerts"><a href="#" ng-click="showLocation(Alert.id)" class="list-group-item" >Alert {{Alert.id}}</span><img src="../images/alert_icon_manage.png"  class="pull-right"/> </a></div><span href="#" class="list-group-item active"></span></div></div></div></div>');

我是 AngularJS 和 Directive 的新手，我不知道如何解决这个问题，但我认为这是 Scopes 的问题！谢谢你。

更新 ：

如果我删除scope:{menu:"=drSrc"}那工作，我可以输入我想要的，但问题是我的元素不再是可拖动的。我认为这与范围有关。有人可以帮忙吗？

4

2 回答 2

4

scope: true指示您的指令应该继承其父级的范围，但scope: {menu: '=drSrc'}会创建一个隔离范围，这会删除您的模板对Alerts. 当您删除时scope: {menu: '=drSrc'}，menu不再存在，因此scope.menu.x失败并且您的元素不再可拖动。

最简单的解决方法是使用scope: true和引用scope.drSrc.x等，而不是scope.menu.x. 使用scope: true，您可以访问父级的范围，包括您的模板使用drSrc的数据。Alerts

这些文章有助于理解指令和范围：

于 2015-05-19T16:13:14.307 回答
1

我目前正在研究一个严重依赖模态对话框的项目。每个都有自己的目的和动态内容。

这是我一直在使用的系统：

索引.html

<!doctype html>
<html ng-app="myApp" ng-controller="MainCtrl">
    <head>
        <title>Dialogs</title>
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
        <button ng-click="openDialog()">Open Dialog</button>
        <modal-dialog show="showMe" dialog-controller="WelcomeDialogCtrl" context="welcome"></modal-dialog>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
        <script src="app.js"></script>
    </body>
</html>

应用程序.js

var app = angular.module('myApp', []);

// The main controller, which will handle index.html
app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.showMe = false;

    $scope.openDialog = function(){
        $scope.showMe = true; // Show the 'welcome' dialog
    };
}]);

// The modal dialog directive
app.directive('modalDialog', [function() {
    return {
        controller: '@', // Bind a controller
        name: 'dialogController', // Bind the controller to this attribute name
        restrict: 'E',
        scope: {
            show: '='
        },
        link: function(scope, element, attrs) {
            // Close this dialog (actually ng-hides it)
            scope.closeDialog = function() {
                scope.show = false;
            };
        },
        templateUrl: function(element, attrs){
            // I prefer to load my dialog templates from a separate folder to keep my project tidy
            return 'dialogs/' + attrs.context + '.html';
        }
  };
}]);

// The 'welcome' dialog has its own controller with its own scope
app.controller('WelcomeDialogCtrl', ['$scope', function($scope){
    // This can be called by the template that resides within the directive
    $scope.exampleFunction = function(text){
        console.log('Example function says: ' + text);
    };
}]);

欢迎.html

<div class="dialog" ng-show="show">
    <div class="dialog-overlay"></div>
    <div class="dialog-box">
        Welcome, be sure to check out this blazin' dialog.
        <button ng-click="exampleFunction('Hi!')">Say Hi!</button>
        <button ng-click="closeDialog()">Close</button>
    </div>
</div>

应用程序.css

body{
    background: #eee;
    margin: 80px;
}

/*
 * Just some fancy schmuck
 */
button{
    border-radius: 5px;
    background: #272;
    color: #fff;
    padding: 5px 12px;
    border: 0;
}

/*
 * The grey, transparent curtain.
 */
.dialog-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #111;
    opacity: 0.2;
    top: 0;
    left: 0;

    z-index: 100;
}

/*
 * The dialog itself. Horribly centered.
 */
.dialog-box{
    background: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    position: absolute;
    width: 600px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-left: -300px;

    z-index: 110;
}

我还用相同的代码制作了一个Plunker 。

于 2015-05-26T07:43:59.400 回答