Ich habe eine grundlegende Webanwendung, die ich mit Foundation for Apps mache. Meine index.html enthält eine Vorlage, home.html in/templates /, die eine kleine partielle, status.html in/partials/enthält. (es ist für einen Hund Leckerli Dispenser mit einem Partikel Photon)AngularJS/Foundation für Apps - Controller kann teilweise nicht verwendet werden
Ich kann benutzerdefinierte Controller gut in einer meiner Vorlagen, aber nicht in meinen Teiltönen. Hier ist der relevante Code Ich verwende (redigiert ersetzt mit "...":
index.html
<!doctype html>
<html lang="en" ng-app="application">
<head>
...
</head>
<body>
...
<div ui-view></div>
</div>
</body>
</html>
home.html
---
name: home
url:/
---
<div class="grid-block align-center">
<center>
<br>
<div ng-include="'/partials/status.html'"></div>
<p ng-controller="variableCtrl">Food last given: {{last}}</p>
...
status.html
<p ng-controller="statusCtrl">Status: {{status}} | <span id="activity">{{activity}}</span></p>
app.js
.factory('variableService', ['$http', function($http) {
var accessToken = "...";
var device_ID = "...";
var apiURL = "https://api.particle.io/v1/devices/" + device_ID + "/";
var getVariable = function(getVar) {
return $http.get(apiURL+ getVar + '?access_token=' + accessToken).then(function (data) {
return data.data.result; // this becomes the fulfilled value of the promise
}, function (err) {
console.log('An error occurred while getting variable:', err);
throw err; // rethrow error so it will propagate
});
};
return {
getVariable: getVariable,
accessToken: accessToken,
device_ID: device_ID
};
}])
.controller('variableCtrl', ['$scope', '$state', 'variableService', '$http', function($scope, $state, variableService, $http) {
moment().format("hh:mm:ss");
$scope.last = variableService.getVariable("last").then(function (result) {
if (moment.unix(result).fromNow() === "Invalid date") {
$scope.last = "?";
} else {
$scope.last = moment.unix(result).fromNow();
};
}, function(err) {
console.log('An error occurred while getting variable:', err);
});
$scope.treatSize = variableService.getVariable("treatSize").then(function (result) {
$scope.treatSize = result;
console.log(result);
}, function(err) {
console.log('An error occurred while getting variable:', err);
});
$scope.mealSize = variableService.getVariable("mealSize").then(function (result) {
$scope.mealSize = result;
console.log(result);
}, function(err) {
console.log('An error occurred while getting variable:', err);
});
}])
.controller('statusCtrl', ['$scope', '$state', 'variableService', '$http', function($scope, $state, variableService, $http) {
var source = new EventSource("https://api.spark.io/v1/devices/"+variableService.device_ID+"/events/?access_token="+variableService.accessToken);
source.addEventListener("status", function(event) {
event = JSON.parse(event.data);
$scope.status = event.data;
console.log($scope.status);
});
source.addEventListener("activity", function(event) {
event = JSON.parse(event.data);
$scope.activity = event.data;
console.log($scope.activity);
});
}])
ich vielleicht vorstellen würde ich brauche, um meine eigene Richtlinie oder Umfang zu schaffen, ist falsch oder so etwas, aber ich kann es nicht zu arbeiten. Ich kann in der Konsole sehen, dass Daten empfangen werden, aber sie werden nicht in meine Bindungen eingefügt. Ich bin neu in Angular und noch ziemlich neu bei Javascript und Webdev im Allgemeinen, also bin ich mir sicher, dass mir etwas dummes fehlt.
Vielen Dank im Voraus
EDIT: Aus Gründen der Klarheit, habe ich Schwierigkeiten, {{status}} und {{}} Aktivität
GELöST angezeigt werden: Das Problem mit diesem wasn Es gibt keine Bereiche, Zustände oder Ansichten. Für die addEventListener s, musste ich am Ende jeder Funktion $scope.$apply(); hinzufügen und es aktualisiert die Daten bindet, wie es sollte. Mit dieser einfachen Änderung funktioniert alles gut.
Zuweisung ich dies mit Foundation versucht, die Umsetzung dieser Link: https://stackoverflow.com/questions/31788600/foundation-for-apps- how-to-ersetzen-the-default-dynamic-routing-plugin aber dann würde keiner meiner Vorlagen überhaupt geladen werden. Also für zusätzliche Fehlersuche, änderte ich den Home.html Controller zu 'statusCtrl' und fügte' {{status}} 'und' {{activity}} 'direkt zu der home.html hinzu und es füllt diese überhaupt nicht . Irgendeine Idee warum? – syndac
Edit: Dieses Problem wurde behoben, indem '$ scope. $ Apply();' am Ende jedes eventListener hinzugefügt wurde. Überprüfen, um zu sehen, ob das alles mit partiellen jetzt funktioniert ... – syndac
Ja, das Problem war '$ scope. $ Apply();'. Nichts anderes – syndac