Вызов переменной области за пределами директивы

Я использую 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 ничего не заполнит. Я запустил console.log внутри .draggable(), и я получил значение верхней позиции, но когда я запустил console.log за пределами .draggable, я получил undefined. Я предполагаю, что переменная scope просто локальна, но задавалась вопросом, как я могу сделать ее глобальной, поэтому я могу использовать значения в разных местах.

источник

2016-03-07 Juan Sierra

Объявление переменной области действия в контроллере, как,

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

и присвоить значение topPosition к этой переменной в директиве, вызывая переменную с помощью родительской области, как

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

и внутри перетаскиваемые,

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

Эта переменная области видимости может использоваться в других событиях в директиве и lso в контроллере.

Пожалуйста, найдите измененный PLUNKER. Надеюсь, поможет.

источник

2016-03-08 01:43:32 rraman

Здесь нет проблемы с объемом. Проблема заключается в том, что draggable не является чем-то, что угловато известно, поэтому цикл дайджеста не вызывается, когда мы взаимодействуем с перетаскиваемым.

Вы можете исправить это, вызвав scope.$apply() или обернув код чем-то, что вызывает $apply() внутри, как $timeout. Это делается для того, чтобы сообщить, что что-то изменилось, и нужно проверить часы и обновить привязки.

Вы можете увидеть это в действии в этом plnkr. (Обратите внимание, что вам нужно сделать затяжку, так как topPosition добавляется только к области, в это stop событие)

To Do (Учиться и осуществлять, читать docs):

Теперь вы можете видеть, что все привязки имеют одинаковое значение, это ожидается, так как все они имеют одинаковый объем. Чтобы исправить это, вы должны использовать изолированные области (подробное объяснение выходит за рамки ответа).

Другие вещи, чтобы отметить, что ваша директива в ng-repeat, так Итл вызывается для каждого элемента, нет необходимости использовать глобальные селекторы (и вы не должны использовать глобальные селекторы в директиве) как $('.drag').draggable(), он должен быть element.draggable().

также ссылка вызывается после создания элемента, поэтому нет необходимости в angular.element(document).ready(.

Также вы должны использовать getItem(), setItem() и т. Д. Для взаимодействия с localstorage.

источник

2016-03-08 05:51:53

Вызов переменной области за пределами директивы

ответ

Смежные вопросы