0
ディレクティブスコープについてちょっと混乱しました。ここでは、ディレクティブスコープ内からコントローラスコープにアクセスできません。コントローラープロパティの双方向バインディングを作成します。"draggingItem"および"droppingItem"。ここでは、$ scopeの依存関係を避けるためのcontrollerAs形式を使用しました。ここディレクティブリンク関数からコントローラスコープにアクセスできない
コードである：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です"、[]））
コンフィグ.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="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="[email protected]*" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script data-require="[email protected]*" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="script.js"></script>
<style>
\t \t [ng-cloak]{display: none;}
\t \t
\t \t drag-list, drop-list{
\t \t \t display: inline-block;
\t \t }
\t \t
\t \t drag-list ul, drop-list ul {
\t \t \t list-style-type: none;
\t \t \t width: 200px;
\t \t }
\t \t
\t \t drag-list ul li, drop-list ul li {
\t \t \t border: 1px solid;
\t \t \t -webkit-user-select: none; /* Chrome all/Safari all */
\t \t \t -moz-user-select: none; /* Firefox all */
\t \t \t -ms-user-select: none; /* IE 10+ */
\t \t \t user-select: none;
\t \t }
\t \t
\t \t drag-list ul li button, drop-list ul li button {
\t \t \t position:relative;
\t \t \t width: 100%;
\t \t \t height: 80px;
\t \t \t background:none;
\t \t \t border:none;
\t \t \t cursor:pointer;
\t \t \t background-color:rgba(3, 169, 244, 0.61);
\t \t }
\t </style>
</head>
<body ng-app="mainApp" ng-cloak="" ng-strict-di="">
<div class="container" ng-controller="mainController as main">
\t \t \t Drag Item: {{main.draggingItem}} = Drop Item: {{main.droppingItem}}
\t \t \t <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"は変化しません...！どうしてか分かりません？ – Shree