Basically, I have my directive defined sample.js as:
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'link-to-sample.html'
};
});
And in my sample.html I got (for example):
<script>
$(div).css('height', {{info}}+'px') //THIS DOESN'T WORK
</script>
<div></div>
In my, say, index.html I would like to pass a numerical value, through the info='' tag and use it in the script, running in the sample.html file.
<my-directive info='100'></my-directive>
But using just {{info}} in <script></script> tags seems not to work.
Would be grateful, if you, guys, help me with this.
P.S. I know, that I could write a code inside directive, use compile, or template:, but I would really like to keep in the separate .html file.
Embedding script tags in template files to deal with DOM in directives is strongly discouraged. It does not play well with the Angular way of DOM updates, and it does not have access to scope and the surrounding directive. Also, it will break under CSP where inline scripts are disallowed.
The recommended way would be to use the link function and remove the script tag in templates.
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'link-to-sample.html',
link: function (element, $scope, attrs) {
element.find('div').css('height', $scope.info + 'px');
},
};
});
You can still keep the separate sample.html for your template HTML. You just don't put logic in it. This is better separation of concerns in my opinion.
<div></div>
Related
i am relatively new to Angular and wanted to know the best way to access this JS file in a html file.
app.directive('appInfo', function() {
return {
restrict: 'Z',
scope: {
info: '!='
},
templateUrl: 'abc.edu'
};
});
If I understand your issue correctly
In the HTML-file, use following:
<script src="myscripts.js"></script>
"myscripts.js" - can be changed to what ever you want.
I am running across an issue when trying to use an unusual method to grab templates for my page-content. I have abstracted it but suffice to say that the code works fine but the testing is throwing up some issues. I have listed my directive below:
Directive:
return {
restrict: 'A',
scope: {
page: '=pageCode',
},
link: function (scope, element) {
$http.get('templates/' + scope.page + '.html', {cache: $templateCache})
.success(function(html) {
element.replaceWith($compile(html)(scope));
});
}
};
Basically, when this directive is called with the page-code attribute, it grabs it and pulls in a specific partial for that page content. I have tried mocking out a $scope to contain the code but that wasn't working so I am hardcoding the data-page-code="404" for now. The test is as follows:
Directive Test:
it('should compile and pass through the scope', function() {
mockDirectiveHtml= '<div data-page-content data-page-code="404"></div>';
mockTemplateHtml= '<h1>Hi</h1>';
$httpBackend.expectGET('templates/404.html').respond(mockTemplateHtml);
pageContentHtml= $compile(mockDirectiveHtml)($scope);
$scope.$digest();
$httpBackend.flush();
expect(pageContentHtml.html()).toEqual('<h1>Hi</h1>');
});
However when this runs, the console is telling me it is trying to hit GET('templates/undefined.html'). Now I am unsure if I have things in the right order, or if that is even the solution but has anyone came across something like this in the past? I assume the directive is running before the attributes are passed to it so when it comes to grab templates/' + 'scope.code' that value is undefined.
Since there is no ng-url directive to use with an #import statement the way ng-src works, I am trying to create a directive for this purpose, the code is like this
.directive('importCss',
function()
{
return {
restrict: 'E',
replace: true,
scope: { loadCss : '=' },
template:'<style>' +
' #import url("{{loadCss}}")' +
'</style>',
};
}
);
The idea basically is to create HTML like this:
<style>
#import url("http://url_to_css_in_parameter")
</style>
Probably this is something very basic, but what is happening is that in my controller I have some init code that runs before asigning values to the scope var assigned to the loadCss parameter. The value is initialized to '' at the start of the controller code. The problem is that a request is made to the server requesting "http://serverAddr/{{loadCss}}" before it does the actual correct request with the values applied to the template.
Here is the callstack for the wrong request (screenshot):
Any idea while the template is being rendered before compiling and how to solve it? Thanks very much.
So I've got an element directive defined:
mod.directive("saleList", function() {
return {
restrict: "E",
templateUrl: "templates/sale-list.html"
};
});
and when I load the /search route I see it downloaded in the Network tab (I have cache in the browser disabled):
when('/search/:zip', {
templateUrl: "templates/sale-list.html",
controller: 'SearchController'
}).
However, I do not see one of its referenced element directives. Consider this snippet of HTML from the sale-list.html:
<sales-in ng-show="salesInZip()"></sales-in>
<sale-card ng-repeat="sale in sales.local"></sale-card>
I don't see the sale-card getting downloaded.
Now, the reason I'm going at it from this direction is because if I make a change in the sale-card I don't see them reflected in the browser until I reboot the machine. This probably has something to do with the fact that I use WebStorm as my IDE and it has its own local server that isn't easily configurable or clearble.
What's going on here?
NOTE: this just started happening recently, and I wonder if it's because something changed in the angular libraries; I am using their CDN to download the most recent version:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular-sanitize.min.js"></script>
mod.directive("saleList", function() {
return {
restrict: "E",
replace: true,
templateUrl: "templates/sale-list.html"
};
});
Try this.
I would like to bind html with the content of $scope.value = "<input type=text name=a>"
Nothing is inserted inf the DOM, but if $scope.value = "Hello <i>Guys</i>" everything is fine.
Is there a limitation/bug with ng-bind-html? Is there a workaround?
I am using 1.2.4 version of angularJS
Thanks for your help, this is a big issue for my development
Christophe
Can't you use a Directive instead of that? This way I think you get rid of your problem
http://docs.angularjs.org/guide/directive
https://egghead.io/search?q=directive
A small example:
angular.module('myApp').directive('myDirective', function(){
return {
restrict: 'E',
replace: true,
// you can set 'transclude: true' instead of the following line to create a new scope but inheriting from the parent
scope: false, // this will make the directive have the same scope as the parent
templateUrl: 'my-html-template.html'// you can load the template like this
// You can also use 'template' and include the html code here
}
});