Question

我对指令范围有点困惑，这里我无法从指令范围内访问控制器范围，我想为控制器属性“draggingItem”和进行双向绑定“droppingItem”即可。在这里，我使用了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>

Answer 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”传递内容，因此它是一个引用。

无法从指令链接函数

1 个答案: