I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I am playing with ng-input-tag and wanted to add bootstrap class to the input element of html so as to get its particular bootstrap class styles, but its not working as expected.
Below is the code:
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<tags-input ng-model="tags" class="form-control"></tags-input>
</div>
</div>
So i hope you ran the code and found that i am unable to get bootstrap form-control class style for directive.
Here is Plunker link : https://plnkr.co/edit/jZlAsJ?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<script>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput"> input</label>
<tags-input ng-model="tags"></tags-input>
</div>
</div>
</body>
</html>
See this plunker ... I've solved this for you ( you may need to modify the styling a bit).
https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview
You need to add jquery in your code.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Bootstrap js will need jquery to run. Please keep in mind that you have added jquery (above script) before bootstrap.js (watch my code carefully, review the sequel).
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?
var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view
you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
I have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
Is there a way i can reset the value of kendo slider once it is changed.
Please see this example code: http://dojo.telerik.com/AKOhe/6
entire code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<input k-ng-model="width" kendo-slider />
</div>
<button k-ng-click="onClick()" />
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
How can i reset value of kendo slider on reset button?
Thanks in advance.
It is not working because you place the button outside of the controller scope, your code already correct. Try it like
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="margin-bottom:20px;">
<input k-ng-model="width" kendo-slider="slider" />
<button ng-click="onClick()"> reset</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>