在指令之外調用范圍變量

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