无法从指令链接功能访问控制器范围答案

【问题标题】：Not able to access controllers scope from directive link function无法从指令链接功能访问控制器范围
【发布时间】：2016-06-16 10:30:41
【问题描述】：

我对指令范围有点困惑，这里我无法从指令范围内访问控制器范围，我想为控制器属性 "draggingItem" 和 进行两种方式绑定“掉落物品”。这里我使用了 controllerAs 格式来避免 $scope 依赖。

这里是代码：CODWA

Script.js

(function(app){
'use strict';

app.

controller("mainController", ["$scope" , "$log", "$http", function($scope, $log, $http){
    var self = this;
    self.config = {};
    self.draggingItem ="N/A";
    self.droppingItem ="N/A";

    $http.get("config.json").success(function(data){
        self.config = data[0].config;
        $log.info("data: : "+self.config)
    });         
}])

//DRAG List - Item
.directive("dragItem", ["$log", function(){
    return{
        restrict: "A",
        controller: "mainController",
        link: function(scope, el, attrs, ctrl){
            el.draggable({
                 containment: ".container",
                 cancel: false,
                 revert: true
            });
        }
    }
}])

//DROP List - Item
.directive("dropItem", ["$log", function($log){
    return{
        restrict: "A",
        controllerAs: "main",
        controller: "mainController",
        scope: {
            draggingItem : "=",
            droppingItem : "="
        },
        link: function(scope, el, attrs, main){
            el.droppable({
                drop: function(event, ui) {
                    main.draggingItem = angular.element(ui.draggable).context.innerText;
                    main.droppingItem = angular.element(el).context.innerText;
                    $log.info("dragitem: "+main.draggingItem+"      dropItem: "+main.droppingItem);
                    ui.draggable.draggable("option", "revert", false);
                }
            });
        }
    }
}])

//DRAG List
.directive("dragList", function(){
    return{
        restrict: "E",
        transclude: true,
        template:  "<span ng-transclude></span>"+
                        "<ul>"+
                            "<li ng-repeat = 'dragItem in main.config.draggables' >"+
                                    "<button drag-item>{{dragItem}}</button>"+
                            "</li>"+
                      "</ul>"           
    }
})

//DROP List
.directive("dropList", function(){
    return{
        restrict: "E",
        transclude: true,
        template: "<span ng-transclude></span>"+
                      "<ul>"+
                            "<li ng-repeat = 'dropItem in main.config.droppables'>"+
                                "<button drop-item>{{dropItem}}</button>"+
                            "</li>"+
                      "</ul>"   
    }
})

})(angular.module("mainApp", []))

config.json

    [{"config" : {"draggables" : ["drag_1", "drag_2", "drag_3", "drag_4"],
    "droppables" : ["drop_1", "drop_2", "drop_3", "drop_4"]}}]

index.html

<html>

  <head>
    <title>Angular JS Views</title>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="jquery-ui@*" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script data-require="jquery-ui@*" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script src="script.js"></script>
    <style>
		[ng-cloak]{display: none;}
		
		drag-list, drop-list{
			display: inline-block;
		}
		
		drag-list ul, drop-list ul {
			list-style-type: none;
			width: 200px;
		}
		
		drag-list ul li, drop-list ul li {
			border: 1px solid;
			-webkit-user-select: none;  /* Chrome all / Safari all */
			-moz-user-select: none;     /* Firefox all */
			-ms-user-select: none;      /* IE 10+ */
			user-select: none;
		}
		
		drag-list ul li button, drop-list ul li button {
			position:relative;
			width: 100%;
			height: 80px;
			background:none;
			border:none;
			cursor:pointer;
			background-color:rgba(3, 169, 244, 0.61);
		}
	  </style>
  </head>

  <body ng-app="mainApp" ng-cloak="" ng-strict-di="">
    <div class="container" ng-controller="mainController as main">
			Drag Item: {{main.draggingItem}} = Drop Item: {{main.droppingItem}}
			                        <h3>Drag and Drop Operation</h3>
      <drag-list>
        <h4>Draggable Item: </h4>
      </drag-list>
      <drop-list>
        <h4>Droppable Item: </h4>
      </drop-list>
    </div>
  </body>

</html>

【问题讨论】：

这里“N/A”没有改变......！不知道为什么？

标签： javascript angularjs

【解决方案1】：

好的，我看到您有一个名为 dropItem 的指令。使用具有以下属性的隔离范围，这些属性是双向绑定 (=)：

scope: {
            draggingItem : "=",
            droppingItem : "="
        }

因此，在您的控制器中，您将使用如下指令：

<div drop-item dragging-item="main.someValueOne" dropping-item="main.someValueTwo"></div>

所以当你修改 draggingItem 或 dropItem 时回到 dropItem 指令，例如：

scope.draggingItem = 'stuff';

main.someValueOne 将使用控制器中的新值进行更新。这也适用于两种方式。值得注意的是，对于控制器中的两种方式绑定，您不要使用dragging-item="{{main.someValueOne}}"，因为这将传入评估的表达式，即 main.someValueOne 持有的任何值。您使用 dragging-item="main.someValueOne" 传递东西，所以它是一个参考。

【讨论】：

谢谢@run 码，我试过了，还是不行...""+ 和链接函数：scope.draggingItem = angular.element(ui.draggable).context.innerText;
我尝试使用的事件：bindToController 它无法正常工作；范围：{}，bindToController：{ draggingItem：“=”，dropingItem：“=”}，