This question already has answers here:
Underscore template throwing variable not defined error
(2 answers)
Closed 6 years ago.
Just playing with Backbone and Underscore, I ran across this error:
ReferenceError: can't find variable: search_label
Here's the whole code:
<!DOCTYPE html>
<head>
<title>Router Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/template" id="search_template">
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<div id="search_container"></div>
<script type="text/javascript">
var SearchView = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
var variables = {search_label: "My Search"};
var my_template = _.template($('#search_template').html(), variables);
this.$el.html(my_template);
}
});
var search_view = new SearchView({el: $('#search_container')});
</script>
</body>
</html>
Why is it complaining about the search_label and how can it be resolved?
Thank you.
The _.template() method has a breaking change in recent versions (1.7.0 onward),
Now the second argument of _.template is a settings object, not the data for template. It returns a template function that accepts the data and returns the actual HTML.
So you should do
var my_template = _.template($('#search_template').html());
var html = my_template(variables);
Related
I've just learned AngularJs. I've try to show a data from controller. but the data not show.
my view :
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</title>
</head>
<body ng-app="FirstApp">
<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/MainController.js"></script>
<script type="text/javascript"></script>
</body>
</html>
my controller :
app controller('MainController',['$scope', function ($scope) {
// body...
$scope.title='Belajar AngularJs';
$scope.book={
title: 'Belajar Angularjs Bersama Ciwuk',
author : 'Ciwuk';
price : 'Free'
};
}]);
my model :
var app=angular.module('FirstApp',[]);
the result was like this :
error
anyone help me please? i'm new in angularJS
You should use app.controller and author : 'Ciwuk',. Use comma not semicolon.
Try use console(F12) when error happen.
#DieuNQ pointed correct to your typo. But here is even better way:
(function () {
"use strict";
angular.module('your_module_name', []).controller("MainController", [
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);
I am getting an strange error while using ngTagInput library:
Error: type property can't be changed.
Here is the screenshot of that error - Error Screenshot.
HTML Code -
<html ng-app="project">
<head>
<link href="/css/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="/css/ng-tags-input.min.css" rel="stylesheet" />
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type="text/javascript" src="/assets/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/js/angular.min.js'></script>
<script src="/js/ng-tags-input.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<form ng-controller="MainCtrl" role="form">
<div class="col-md-12 topM10px">
<tags-input ng-model="formInfo.tags" placeholder="Add a keyword"></tags-input>
</div>
<div class="col-md-12 topM10px">
<div ng-click="submitidea()" class="col-md-3 submitbtn">Submit</div>
</div>
</form>
</body>
</html>
Controller code (app.js)-
var app = angular.module('project', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.formInfo = {};
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
$scope.submitidea = function(){
console.log($scope.formInfo);
}
});
Please someone help. Thanks in advance
You appear to have a conflict between one of more of your libraries. This can probably be resolved by isolating which library is causing the issue (when commented out, the error goes away), and then trying different versions of that library and/or Angular.
I did a fiddle that uses the same version of Bootstrap and jQuery that you are, but is using Angular 1.4.8 instead of 1.5, so I believe the conflict is between jQuery 1.8.1 and Angular v1.5.0-rc.0 since the fiddle works without any errors. Recommend dropping your Angular version down to 1.4.8 and see if that resolves the issue.
Add library angular first
For example:
I have a paragraph element in html. The element is visible only if a value is true.I have used ng-if to check that. I am trying to access the element through getElementByID but it returns null.
However i am able to access the other paragraph element in the html where ng-if is not used. How do i access the paragraph element and get the value which is bound with angular directive?
Html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="pull-right" style="margin-top:50px;margin-right:100px" ng-controller="MainController">
<div>
<p id="link" ng-if="user.isAdmin">New Link</p>
<p id="test">
</div>
{{value}}
</div>
</body>
</html>
Angular JS
var app = angular.module('testApp',[]);
app.controller('MainController', ['$scope', function($scope) {
$scope.user={};
$scope.today = new Date();
$scope.user.isAdmin=true;
$scope.value = "Test123";
var objstatic = document.getElementById('link');
console.log(objstatic);//returns null
var objdynamic = document.getElementById('test');
console.log(objdynamic);
objdynamic.innerHTML="Dynamic Test";
}]);
Working copy is updated here Working Demo
The problem is that you're trying to access the element before the digest cycle has rendered it.
If you change the code to use $timeout then you will see the element
$timeout(function() {
var objstatic = document.getElementById('lnkmanage');
console.log(objstatic);
}, 0);
Use watch and check for change in the scope variable.
$scope.$watch('user.isAdmin', function(newValue, oldValue) {
if($scope.user.isAdmin) {
var objstatic = document.getElementById('lnkmanage');
console.log(objstatic);
}
});
Try this
angular.element(document.getElementById('lnkmanage')).scope().$apply()
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding