在指令之外调用范围变量

Question

我正在使用juqeryUi draggable来拖动div。 我存储的是被拖到localStorage内部的位置，以便刷新页面时它位于同一位置。 我现在想做的是将位置存储在局部变量中，并将值分配给另一个div。

的index.html

    <!DOCTYPE html>
    <html lang="en" ng-app="container">
    <head>
      <meta charset="utf-8">
      <title>efoli</title>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/angular.min.js"></script>
      <script type="text/javascript" src="containers.js"></script>

      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="Style/design.css">
    </head>
      <body ng-controller="ContainerController as contain">

        <div id="grid" ng-hide="editing"></div>
        <div class="drag resize {{item.class}}" ng-repeat="item in block" id="{{item.id}}" ng-hide="editing" edit>
          <h1>{{item.title}}</h1>

  <!-- ------- Wont show anything--------- -->
          <h2>{{topPosition}}</h2>
          <textarea type="text" id="{{item.id}}" style="display:table-cell; width:inherit; height:inherit"></textarea>
        </div>
      </body>
    </html>

Containers.js

(function() {
  var app = angular.module('container', []);
  app.controller('ContainerController', ['$scope', function($scope) {
    $scope.block = [
      { "id" : "1",
        "class":"fname",
        "title" : "First Name",
        "text":""},
      { "id" : "2",
        "class":"lname",
        "title" : "Last Name",
        "text" : ""},
      { "id" : "3",
        "class":"education",
        "title" : "Education",
        "text" :""},
      { "id" : "4",
        "class":"contact",
        "title" : "Contact",
        "text" : ""},
      { "id" : "5",
        "class":"experience",
        "title" : "Experience",
        "text" : ""}
    ];
  }]);

  app.directive('edit', function(){
    return {
      restrict:'A',
      link: function($scope) {
        angular.element(document).ready(function() {
          var sPositions = localStorage.positions || "{}",
          positions = JSON.parse(sPositions);

          $.each(positions, function (id, pos) {
            $("#" + id).css(pos)
          });

          $('.drag').draggable({
            grid:[25,25],
            scroll: false,
            stop: function (event, ui) {
              positions[this.id] = ui.position
              $scope.topPosition = positions[this.id].top;
              $scope.leftPosition = positions[this.id].left;
              localStorage.positions = JSON.stringify(positions)
            }
          }); ...

在index.html中，当我调用topPosition时，不会填充任何内容。 我在.draggable（）内运行console.log，我得到了最高位置的值，但是当我在.draggable之外运行console.log时，我没有定义。 我猜想scope变量只是局部变量，但想知道如何使它成为全局变量，以便可以在不同的地方使用这些值。

Answer 1

在控制器中声明一个范围变量，

$scope.topPosition = ""; //in the container controller

并通过使用父范围调用变量，将topPosition值分配给指令中的变量，例如

var parentScope = $scope.$parent; // inside the edit directive

在可拖动的里面

parentScope.topPosition = positions[this.id].top;

该范围变量可以在指令中的其他事件以及控制器中使用。

请找到修改后的PLUNKER 。 希望能帮助到你。

Answer 2

这里没有范围问题。 问题在于，可拖动对象不是Angular所知道的，因此当我们与可拖动对象进行交互时，不会调用摘要循环 。

您可以通过调用scope.$apply()或将代码包装在内部调用$apply()东西中来解决此问题，例如$timeout 。 这样做是为了通知Angle某些更改，它需要检查表并更新绑定。

您可以在此plnkr中看到这一点。 （请注意，您需要进行拖动，因为topPosition仅在其stop事件中添加到作用域中）

要做的事（学习并实施，请阅读docs ）：

现在您可以看到所有绑定具有相同的值，这是预期的，因为它们都共享相同的作用域。 要解决此问题，您应该使用隔离范围（详细说明超出了答案范围）。

还要注意的另一件事是，您的指令位于ng-repeat ，因此将为每个元素调用该指令，而无需使用全局选择器（ 并且您不应在指令中使用全局选择器 ），例如$('.drag').draggable() ，应为element.draggable() 。

创建元素后也会调用link，因此也不需要angular.element(document).ready( 。

另外，您应该使用getItem() ， setItem()等与localstorage进行交互。

在指令之外调用范围变量

问题描述

2 个解决方案

解决方案1
0 2016-03-08 01:43:32

解决方案2
0 2016-03-08 05:51:53

在指令之外调用范围变量

问题描述

2 个解决方案

解决方案1 0 2016-03-08 01:43:32

解决方案2 0 2016-03-08 05:51:53

解决方案1
0 2016-03-08 01:43:32

解决方案2
0 2016-03-08 05:51:53