I am on beginner level on Backbonejs. I am trying to call simple template. But it's giving me below error:
*Uncaught TypeError: Cannot read property 'replace' of undefined*
See plnk which I have created for it:
http://plnkr.co/edit/fTcL4m?p=info
You can also find code here:
<!DOCTYPE html>
<html>
<head>
<title>Loading a template</title>
</head>
<body>
<h1>Loading a template</h1>
<div id="search_container"></div>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="underscore.js#1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="backbone.js#1.1.2" data-semver="1.1.2" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script>
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template($("#search_template").html(), {});
this.el.html(template);
}
});
var search_view = new SearchView({ el: $("#search_container") });
</script>
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
</body>
</html>
The major issue is the order of your script tags,
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
does not exist when your script runs. You should make sure it does, By adding it before the one containing code, or wrapping your code in $(function(){}) etc.
Another issue is that you should use this.$el.html(template); instead of this.el.html(template);
Related
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
I am working on uib-popover recently, I found a problem that I am confused with.
I want to popover a template, in this template I have an input, at first the input have initial value.
I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<hr/>
<hr/>
<hr/>
<button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{dynamicPopover.title}}
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{inputContent}}
<script type="text/ng-template" id="inputContent.html">
<div class="form-group">
<input type="text" ng-model="inputContent" class="form-control">
</div>
</script>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
title: 'Title'
};
$scope.inputContent = "hello";
});
Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.
You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.
Example Directive:
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
And to use it:
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}
<script type="text/ng-template" id="customPopover.html">
<div class="form-group">
<input type="text" ng-model="message" class="form-control">
</div>
</script>
Here is a working plunk. I hope this is what you're looking for
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angsc.js"></script>
</head>
<body>
<main ng-app="myModule">
<div ui-view=""></div>
<main>
</body>
</html>
This is my master page
<div ng-controller="myController">
<input type="button" value="Add" ng-click="addclick()">
<input type="button" value="Search" ng-click="searchclick()">
<br/>
</div>
This is my content page.
var myApp = angular
.module("myModule",['$mdDialog'])
.controller("myController",function ($mdDialog,$scope){
$scope.addclick=function(){
$mdDialog.show({
template:'addnew.html'
});
};
$scope.searchclick=function(){
$mdDialog.show({
template:'searchold.html'
});
};
});
This is my js file.
I also have 2 html files namely "addnew.html" and "searchold.html". Not getting pop up of those two files on button click. Is there an error in my code? Kindly help me..
Your dependent module name is wrong. Instead of $mdDialog it should be ngMaterial. $mdDialog is the service being injected in controller and is part of the ngMaterial module. Change your code as below to get it working:
var myApp = angular
.module("myModule",['ngMaterial'])
.controller("myController",function ($mdDialog,$scope){
$scope.addclick=function(){
$mdDialog.show({
template:'addnew.html'
});
};
$scope.searchclick=function(){
$mdDialog.show({
template:'searchold.html'
});
};
});
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script src="angsc.js"></script>
</head>
<body>
<main ng-app="myModule">
<div ng-controller="myController">
<input type="button" value="Add" ng-click="addclick()">
<input type="button" value="Search" ng-click="searchclick()">
<br/>
</div>
<main>
</body>
</html>
Codepen: http://codepen.io/addi90/pen/ZOEqZq
I am using the ngModal modal dialog box directive for my angular application. It's displaying some weird behavior that I don't quite understand. When I attach variables directly to the controller's $scope and reference them in the dialog box, the binding breaks. Changing their values in the dialog has no effect on the variables in the controller. But if I add the variables as properties to an object and then add the object to the $scope it works. In other words, if I do this
$scope.v1 = 1
$scope.v2 = 'abc'
it doesn't work, but if I do
$scope.myData = {
v1: 1,
v2: 'abc'
}
things work fine. What's the deal? You can see a working version of the code here and a broken version here.
If the plunk apps aren't loading for you, here is the code:
html
<!DOCTYPE html>
<html data-ng-app='ngModalDemo'>
<head>
<title>ngQuickDate Demo</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ng-modal.css" media="all" />
<style type='text/css'>
body{font-family:'Helvetica Neue',Helvetica,sans-serif}
h1 { padding: 0; margin: 0; }
.ng-cloak { display: none; }
</style>
</head>
<body>
<div ng-controller='DemoController'>
<modal-dialog show='myData.modalShown' width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
<p>This is some html content</p>
<p>
<label for='hello'>Hello:</label>
<input type='text' name='hello' ng-model='myData.hello' />
</p>
<p>
<label for='foo'>Foo:</label>
<input type='text' name='foo' ng-model='myData.foo' />
</p>
<img src='http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg' width='300px'/>
</modal-dialog>
<button ng-click='toggleModal()'>Toggle Modal</button>
<br/>
<br/>
<br/>
<p><strong>Shown?</strong> {{myData.modalShown}}</p>
<p><strong>Hello</strong>: {{myData.hello}}</p>
<p><strong>Foo</strong>: {{myData.foo}}</p>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script type="text/javascript" src="ng-modal.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</body>
</html>
angular app
app.config(function(ngModalDefaultsProvider) {
return ngModalDefaultsProvider.set({
closeButtonHtml: "<i class='fa fa-times'></i>"
});
});
angular controller
app = angular.module('ngModalDemo')
app.controller('DemoController', function($scope) {
$scope.myData = {
link: "http://google.com",
modalShown: false,
hello: 'world',
foo: 'bar'
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});