Question

我正在尝试使用interact.js动态添加新的div，然后使用angular.js将其填充为值。我在函数中添加了js代码行67-80中的div：oninertiastart

然而，输出只是{{vals ['pressure']}}（我试图以几种不同的方式访问val中的变量。看来我在链接中遗漏了一些东西。你能帮帮我吗？ / p>

var app = angular.module('DAQMonitor', ['ui.bootstrap']);

app.service('api', function($http) {

    this.get_status = function(success, error) {
        return $http.get('/api/status')
    }
})

app.controller('C', function($scope, api, $interval) {


    var poll = function() {
      $scope.vals = {
        values: ["coll1", "coll2", "coll3", "coll4", "pressure"],
        coll1: 2,
        coll2: 3,
        coll3: 4,
        coll4: 5,
        pressure: 6
    };
	    //api.get_status()
	     //   .success(function (data) {
         //       $scope.vals = data.values;
//
         //       $scope.connected = true;
//
	       // })
	        //.error(function() {
	        //    $scope.connected = false;
	        //})
	}
    //
    poll()
    $interval(poll,1000);
});


var startX, startY;
interact('.drag')
    .draggable({

    snap: {
      targets: [
        interact.createSnapGrid({ x: 30, y: 30 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },

    // enable inertial throwing
	inertia: true,
    // keep the element within the area of it's parent
	restrict: {
	    restriction: "parent",
	    endOnly: true,
	    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
	},
	onstart: function(event) {
	    startX = event.pageX;
	    startY = event.pageY

	},
    // enable autoScroll
	autoScroll: true,
    oninertiastart: function (event) {
        var id = event.target.getAttribute("id");
        var div = document.createElement('div');
        div.setAttribute("id",id+"_s")
        var header = document.createElement('div');
        header.className = "scaler-header";
        header.innerHTML = id;
        var number = document.createElement('div');
        number.className = "scaler-number";
        number.innerHTML = "{{vals['pressure']}}";
        div.appendChild(header);
        div.appendChild(number);
        var canvas = document.getElementById('canvas');
        div.className = 'resize-drag scaler';
        canvas.appendChild(div);

        // keep the dragged position in the data-x/data-y attributes
        x = event.target.getAttribute('data-x') - canvas.offsetLeft;
        y = startY - canvas.offsetTop;

        div.style.webkitTransform =
        div.style.transform =
	    'translate(' + x + 'px, ' + y + 'px)';

        div.setAttribute('data-x', x);
        div.setAttribute('data-y', y);
	},
    // call this function on every dragmove event
	onmove: dragMoveListener,
    // call this function on every dragend event
	onend: function (event) {
	    var textEl = event.target.querySelector('id');
	}
    });

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
	'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
}

.resize-drag {
  background-color: #29e;
  color: white;
  font-family: sans-serif;
  border-radius: 8px;

  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 100%;
}

.scaler {
  width: 100px;
  height: 100px;
}

.scaler-header {
height: 20%;
width:100%;
overflow: hidden;
font-size: 100%;
text-align: center;
}

.scaler-number {
height: 80%;
width:100%;
overflow: hidden;
font-size: 100%;
text-align: center;
}

<script src="//cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<html>
<head>


</head>

<body ng-app = "DAQMonitor" ng-controller="C">

<table>
    <tr ng-repeat="val in vals">
        <th>
            <div id="{{val}}" class="drag"> {{val}} </div>
        </th>
    </tr>
</table>

<div id="canvas" class="resize-container">

</div>



</body>

<!--<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="interact.js"></script>
<script src="script2.js"></script>
<link href="style.css" rel="stylesheet">
</html>

如何使用interact.js动态添加div，然后通过angular.js填充值

0 个答案: