I have a directive that contains another directive. Here is the directive:
<div class="chat-container">
<h5 class="chat-header">
<span class="patient-name-container">{{encounter.patient.firstName }} {{encounter.patient.lastName}}</span></h5>
<div ng-show="showMessages">
<div messages-container messages="encounter.comments"></div>
</div>
</div>
And here is my test:
var element;
beforeEach(module('app/views/chat.container.html'));
beforeEach(inject(function($templateCache, $compile, $rootScope) {
var chatTemplate = $templateCache.get('app/views/chat.container.html');
$templateCache.put('views/chat.container.html', chatTemplate);
var directive = angular.element('<div chat-container max-chat-count="800" class="pull-left"></div>');
element = $compile(directive)($rootScope);
$rootScope.$digest();
}));
it('the remaining count to be 800', function() {
expect(element.find('#counter').text()).toBe('800');
});
});
My error is Error: Unexpected request: GET views/messages.container.html. It is looking for the html to create the messages-container directive, but it cannot find it. I have tried adding the other directive like this right after the first one:
var messagesTemplate = $templateCache.get('app/views/messages.container.html');
$templateCache.put('views/messages.container.html', messagesTemplate);
but I still get the same error, so I have 2 questions.
First - How do I test this?
Second - I am now creating my test with a dependency on another directive, what is the right way to handle that?
The problem was me not adding the template with the module function before I tried to access it. Here is the code that fixed the issue:
var element, scope;
beforeEach(module('app/views/chat.container.html'));
* beforeEach(module('app/views/messages.container.html'));
beforeEach(inject(function($templateCache, $compile, $rootScope) {
var chatTemplate = $templateCache.get('app/views/chat.container.html');
$templateCache.put('views/chat.container.html', chatTemplate);
var messagesTemplate = $templateCache.get('app/views/messages.container.html');
$templateCache.put('views/messages.container.html', messagesTemplate);
var directive = angular.element('<div chat-container max-chat-count="800" class="pull-left"></div>');
element = $compile(directive)($rootScope);
$rootScope.$digest();
scope = $rootScope;
}));
I did not have the line with the * before. Now everything works perfectly.
Related
So, I have two controllers (they have been reduced for simplicity) with one function each. The functions change a variable inside each of the controllers. The thing is, it looks like only the variable in the first controller is updated.
app.js
(function() {
var app = angular.module('ScBO', []);
var token = {};
app.controller("LoginController", ['$http', function($http){
this.userData = {};
var lc = this;
this.in = false;
this.loginGo = function(){
$http.post(<link>, <userData>)
.then(function successCallback(response){
token = response.data.access_token;
lc.in=true;
}, function errorCallback(response){
lc.in=false;
});
};
}]);
app.controller("DashboardController", ['$http', function($http){
var dsb = this;
this.totalLocals = 0;
this.refresh = function(){
$http.get('<link>?access_token='+token)
.then(function successCallback(response){
dsb.totalLocals = response.data.number_of_locals.number_of_locals;
}, function errorCallback(response){
});
};
}]);
})();
index.html
<body ng-controller="LoginController as loginCtrl">
<div id="login-div" ng-hide="loginCtrl.in">
<form ...>
...
</form>
</div>
<div id="dashboard" ng-show="loginCtrl.in" ng-controller="DashboardController as dsb">
<div class="numbers">
<p>Number of Locals</p>
{{dsb.totalLocals}}
</div>
</div>
</body>
So in the html, the first div appears in the beginning and not the second one. Then it hides and the second div shows up. This means that they are following the update of the loginCtrl.in variable.
However, when I call the refresh function, it doesn't update the value in the last div.
I've tried with $scope and have been searching in here but I haven't been able to find a solution yet. Specially since the two controllers are equal but only one of them seems to be updating the variables normally.
So, I've figured out the problem.
In the code above the error doesn't show as I only posted part of the code for simplicity, but I thought it was enough.
The thing was: I had the button that triggers the refresh function in a different div (like #leonardoborges ' plunkr). Like that two controllers are instantiated with their own values, something that I didn't know. The timeout function updates all instances of the controller, so that was confusing me.
So now I just put everything within one instance of the controller.
I am trying to create a directive which will take the html content and place it n a jsPanel element.
So far I am able to compile the scope and able get elements with the scope. Then i tried to get html tag with ng-repeat, where i got stuck.
Following is the code used to create the directive
mainApp.directive('jspanelcontent', function($compile) {
console.log("loading");
var directive = {};
directive.restrict = 'AE';
directive.compile = function(element, attributes) {
var linkFunction = function($scope, element, attributes) {
console.log(element.html());
var contenthtml = element.html();
contenthtml = angular.element($compile(contenthtml)($scope));
element.html("");
$scope.jspanleinstance = $.jsPanel({
position: {
my: "left-bottom",
at: "left-bottom",
offsetY: 15
},
theme: "rebeccapurple",
contentSize: {
width: 600,
height: 350
},
headerTitle: attributes.panelcaption,
content: contenthtml,
});
// });
}
return linkFunction;
}
return directive;
});
And using like following in html
<div jspanelcontent panelcaption="list">
<div ng-controller="ListController">
{{test}}
<div ng-repeat="user in users">
<span>{{user.id}}</span>
<span>{{user.name}}</span>
<span>{{user.email}}</span>
<br />
</div>
</div>
The console log returns as
Output i am getting (jsPanel)
As you see the "test" variable is properly bind and the ng-repeat element is display as commented, I am not aware why it's returning like that. If anyone can figure out the issue, then i might get it working.
I know i can access the users data as $scope.users inside the directive. The problem here is that user able to use the directive commonly, so i have to assume that i don't the variables in the $scope.
I stuck in this place, and couldn't find any solutions to try. Any suggestions or solutions will be more helpful. :)
NOTE: No syntax errors, outside the directive the data is displaying (Tested)
HTML:
<div ng-app = "myApp" ng-controller = "someController as Ctrl">
<div class = "clickme" ng-repeat = "elems in Ctrl.elem" ng-click ="click()">
{{elems.title}}
click me
<div id="container">
</div>
</div>
angularjs
var Elems = [{title : "1"},
{title : "2"},
{title : "3"}];
var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
var self = this;
self.elem = Elems;
$scope.click = function(){
//append directive <test-Input></test-Input>
};
});
myApp.directive('testInput',function(){
return {
restrict: 'E',
replace: false,
transclude: false,
template: '<div>asdasdasdasd</div>',
controller: function($scope) {
}
};
});
how to append directive to individual div when it clicked? I know it will be very easy with Jquery but it's hard to do in angular way.
You do not want to do it this way, one of Angulars advantages is that you do not have to deal with changing the HTML yourself, but use data-binding and templates instead, establishing an MVC-pattern. You are still thinking in jQuery ;-)
Change only your data on click and use ng-repeat to make angular append your template for you.
P.S.: Why do you use $scope in your controller? You are using controller as-sntax (which is good), you can simply bind the click()-funciton to the controller instead of $scope
Try this..
var modalElementTemplate = angular.element(Your template);
var linkFn = $compile(modalElementTemplate);
var modalElement = linkFn($scope);
$("#WheretoAppend").append(modalElement);
Instead of doing a huge DOM alteration put the testInput directive in the ngRepeat loop and add a check at the top of the directive whether the div container has been clicked or not (need scope isolation).
i am new and experimenting with AngularJS.
That being said, i am unsure how to bind value to an ng-switch and change between views dynamically by changing the 'activeView' variable value.
Side note: is it a good practice to switch between views like this? The views are different ways of displaying the same data so its pretty much the same context and i did not see a reason to create a different page for the two views. Oh and the views contents are actually directives components.
the html:
<body ng-controller="SomeController as vm">
<div ng-switch="{{vm.activeView}}">
<div ng-switch-when="someView">
some directive component
</div>
<div ng-switch-when="anotherView">
another directive component
</div>
<div ng-switch-default>
nothing to show
</div>
</div>
</body>
the controller:
(function () {
'use strict';
angular
.module('app')
.controller('SomeController', SomeController);
function SomeController() {
var vm = this;
vm.activeView = '';
function setViewType(viewType) {
vm.viewTypes = viewType;
}
setViewType('anotherView');
}
})();
So what happen is that the default switch is visible, event after calling setViewType('anotherView');
Thanks in advance!
You don't need the interpolation when using ng-switch ({{vm.activeView}}).
You aren't assigning vm.activeView with a value.
Your angular.module doesn't have a dependency array. If this is the place that you define your module then add it.
(function () {
'use strict';
angular.module('app', []) // add the dependency array
.controller('SomeController', SomeController);
function SomeController() {
var vm = this;
vm.activeView = 'anotherView'; // change this
function setViewType(viewType) {
vm.viewTypes = viewType;
}
setViewType('anotherView'); // this changes the viewTypes prop
}
})();
Check on this JSFIDDLE.
I am using the AngularJs-UI components for Bootstrap. I would like to insert a filled out template into one of the data elements for the popover feature. This works find for all elements not inside of a ng-repeat. How do I get the ng-repeat elements to work inside of a interpolated template?
I have a plunker at http://plnkr.co/edit/Cuku7qaUTL1lxRkafKzv Its not working because I don't know how to get Angular-UI-bootstrap to in plunker.
<div data-popover="{{createHTML()}}">some content</div>
My local scope has the function createHTML() that looks something like this.
angular.module('myApp', ['ngSanitize'])
.controller("myController", function(myService){
$scope.createHTML = function() {
var thingy = { blah: "foobar", collection: [ "1", "2", "3" ] };
return myService.html_for(thingy);
}
});
And the service is
angular.module('myApp')
.service('myService', function($templateCache, $interpolate, $sanitize, $log) {
"use strict";
function html_for(thingy) {
var template = $templateCache.get('thingyTemplate.html'),
link = $interpolate(template),
html = link(thingy),
unsafe = $sanitize(html);
return unsafe;
}
return {
html_for: html_for
}
});
Templates:
<script type="text/ng-template" id="thingyTemplate.html">
<div>
<div><strong>Blah:</strong> {{blah}}</div>
<div data-ng-repeat="foo in collection"><strong>Collection:</strong> {{foo}}</div>
<div><strong>Collection[0]:</strong> {{collection[0]}}</div>
<div><strong>Collection[1]:</strong> {{collection[1]}}</div>
<div><strong>Collection[2]:</strong> {{collection[2]}}</div>
</div>
</script>
<script type="text/ng-template" id="template/popover/popover.html">
<div class="popover {{placement}}" data-ng-class="{ in: isOpen(), fade: animation() }">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title" data-ng-bind="title" data-ng-show="title"></h3>
<div class="popover-content" data-ng-bind-html="content"></div>
</div>
</div>
</script>
$interpolate doesn't handle directives like ngRepeat (
Difference between parse, interpolate and compile ). $interpolate:
Compiles a string with markup into an interpolation function. This
service is used by the HTML $compile service for data binding.
To handle ngRepeat and other directives you want $compile. But for your use case $compile is going to result, unfortunately, in a number of changes because:
It needs a scope to compile against rather than just a context like $interpolate. Moreover it needs the scope thingy is on.
This means we'll need to reference your properties like so {{thingy.blah}} instead of {{blah}} inside your template.
The compile needs to happen when the popup is on the dom.
The popup is only on the dom when it's open.
So we can't just replace $interpolate with $compile inside your service.
One approach is to replace data-ng-bind-html with the following directive that acts like an ng-bind-html that has a built in $compile (clearly you should only use this with html that you know is safe).
.directive('compile', function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
var result = element.html(value);
$compile(element.contents())(scope.$parent.$parent);
}
);
};
});
Used like so (with compile replacing ng-bind-html:
<div class="popover-content" compile="content"></div>
One issue is that we need thingy to be in scope. There's a few of ways of handling that- but for demonstration purposes I've manually gone back up to the scope the popover is called from - which is 2 scopes up thus the scope.$parent.$parent.
Using this compile directive you no longer $interpolate or $sanitizeso the function in your service can shrink down to just returning the appropriate template:
function html_for() {
var template = $templateCache.get('thingyTemplate.html');
return template;
}
demo fiddle