Fatal编程技术网
  • javascript/
  • Javascript 使用AngularJS中的指令时出现多个子HTML元素问题

Javascript 使用AngularJS中的指令时出现多个子HTML元素问题

javascript angularjs html

Javascript 使用AngularJS中的指令时出现多个子HTML元素问题,javascript,angularjs,html,angularjs-directive,angular-template,Javascript,Angularjs,Html,Angularjs Directive,Angular Template,我正在使用一个模板来创建一个弹出式菜单，如果有一个新的菜单并且它一直工作到现在，它将显示警报。但是我想添加手动警报，这就是为什么我想添加一个输入文本，但是我不能在输入字段上写，我甚至不知道为什么。输入字段有点被禁用 我的指示是这样的： $scope.tb = { x: 0, y: 0 }; module.directive('myDraggable', function ($document, $interval) { return { restrict: 'EA', repl

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

我的指示是这样的：

$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());
        }
    }
}
 });
我试图使scope成为现实，但我面临两个问题： 我无法再移动我的弹出菜单（是的，我的弹出菜单是可拖动的） 而且输入的文本也不会显示我正在键入的文本

这是我的缓存模板：

    $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>');

$templateCache.put（'control.tpl.html'，'Manage'）；
我是AngularJS和Directive的新手，我不知道如何解决这个问题，但我认为这是范围的问题！！ 多谢各位

更新：

如果我删除作用域：{menu:'=drSrc“}，我可以键入我想要的内容，但问题是我的元素不再是可拖动的。
我想这是和望远镜有关的东西。有人能帮忙吗？

作用域：true
表示您的指令应该继承其父指令的作用域，但
作用域：{menu:'=drSrc'}
会创建一个隔离的作用域，从而删除模板对
警报的访问。删除
scope:{menu:'=drSrc'}
时，
menu
不再存在，因此
scope.menu.x
将失败，并且您的元素不再可拖动

最简单的修复方法是使用
scope:true
和reference
scope.drSrc.x
等，而不是
scope.menu.x
。使用
scope:true
，您可以访问父级的作用域，包括
drSrc
和模板正在使用的
警报
数据

这些WriteUp有助于理解指令和作用域：


    

  • 

  • 

  • 

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

以下是我一直使用的系统：

index.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>



<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>


welcome.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>



<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>



我还使用相同的代码创建了一个应用程序。
我没有看到您使用范围中的任何模型或变量进行输入。它的价值应该存储在哪里？我真的不明白你的意思？你能解释更多吗？你能创建一个plunker或fiddle来演示你的问题吗？好的，我会尝试创建一个并让你知道itI注意，
control.tpl.html
中似乎使用了一些无效的html-你能验证上面演示的html是你当前使用的吗，或者在提供代码段的过程中引入了一些错误吗？这就是问题所在，但如果我不让scope:{menu:'=drSrc'}我尝试过，但在我的模板cach中，我使用的是指令dr src=“tb”tb是我初始化x和y的作用域的变量，这正是访问我的作用域的问题，我应该在html指令中放置什么？tb是否总是初始化
{x:0，y:0}
？如果是这样，为什么要把它从指令之外拉出来呢？这个Plunker@Dave Alperovich请求的将有助于查看您的完整案例。是的，它总是初始化为
{x:0，y:0}
。我能把它拉到哪里？在指令内？我该怎么做？我试着去做，但我遇到了一些困难，它还没有准备好，我还在努力。这是我第一次尝试这么做，在我的项目中，我使用的是谷歌地图api，对我来说，要做到比这更快并不容易。你应该把它放在链接函数的顶部，还有其他变量。但是您只使用它来初始化
x
和
y
，您默认为
0
，因此看起来您根本不需要
drSrc
/
菜单
/
tb
。只需设置
x=0，y=0
，然后从那里开始。但my
dr src=“tb”
是HTML中的指令，它给出了
x
和
y
，这意味着控制可拖动弹出窗口的位置（顶部，左侧）。