I have a plunker for this issue at http://plnkr.co/edit/yJNrpATGWY7iUeVcx6lx?p=preview
index.html:
<!DOCTYPE html>
<html ng-app="ItemEnum">
<head>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="bootstrap#*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.0-rc3-nonmin" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="EnumCtrl">
<ul class="nav">
<li ng-repeat="item in items">
<a ng-href="" di-enum-items di-item-class="link_active">
<span> {{item.name}} ({{item.count}}) </span>
</a>
</li>
</ul>
</div>
</body>
</html>
script.js:
angular.module('ItemEnum', [])
.controller('EnumCtrl', function($scope) {
$scope.items = [
{name: 'cars',count: 10},
{name: 'bikes',count: 20}
];
})
.directive('diEnumItems', function() {
return {
restrict: 'A',
scope: {
diItemClass: '='
},
link: function(scope, element, attrs) {
$(element).bind('click', function() {
if ( $(element).hasClass(attrs.diItemClass) ) {
element.removeClass(attrs.diItemClass);
} else {
element.addClass(attrs.diItemClass);
}
});
}
};
});
style.css:
/* Styles go here */
.link_active {
color: red;
}
Somehow the angular directive is screwing up the link enumeration. What am I doing wrong? Please note that I'm not looking for an answer that tells me that there is a more simple way of doing this. I know I can just create a directive that simply acts on the css class alone -- and besides the css class operations the directive performs is working fine here. This directive is more extensive and does some other stuff. However, the plunker shows the basic problem I'm having. I have read some other SO posts about directives as well as have read the Angular Directive guide but can't seem to get past this basic issue.
You're creating a new scope on your directive that's screwing up the ng-href render. I don't really see any reason why you need a scope in this situation, since you're using attrs anyway, so I removed it. Works now.
http://plnkr.co/edit/6ocoBa9yTQWMeL95O5Yw?p=preview
Related
I hope you can help me out or give me a hint to solve my problem.
I am making an app using angularjs and material design lite (css and js).
My problem is that the material design js file doesn't take affect on the partials once the state changes and basically I lost all the functionality that material design library provides me.
this is my code so far
index.html
<!doctype html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appy2go</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Material Design Lite -->
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.pink-blue.min.css">
<!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> -->
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/signin/signin.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="app-wrapper" ui-view></div>
<!--THIS BUTTON WORKS AS SUPPOSED TO BE-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</body>
</html>
app.js
angular.module('app',[
'ui.router',
'app.home',
'app.signin'
])
.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
})
.controller('AppController',function($scope){
console.log("ready");
})
home module
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES -->
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">App Name</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">App Name</span>
<nav class="mdl-navigation">
link 1
link 2
link 3
</nav>
</div>
<main class="mdl-layout__content">
<div>Content</div>
<!-- Colored FAB button with ripple -->
<!-- Accent-colored raised button with ripple -->
<!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Appy2go</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
home.js
angular.module('app.home',[
'ui.router'
])
.config(function($stateProvider){
$stateProvider.state('home',{
url:'/',
controller: 'HomeController',
templateUrl: 'modules/home/home.html',
})
})
.controller('HomeController',function($scope,$http){
console.log("Ready");
})
Angular has to know when to look for changes in the variables. If you have non-angular code changing things then you have to tell angular to rerun the digest cycle.
Here's an example where I wrapped the jQuery Dialog function in Angular. I'm having to manually tell Angular to WATCH and APPLY.
app.directive("dialog", function() {
return {
restrict: 'A',
scope: {
dialog:"=",
},
controller: function($scope) {
$scope.$watch("dialog", function(){
if($scope.dialog){
$scope.open();
}else{
$scope.close();
}
});
},
link: {
pre: function(scope, element, attributes) {
scope.open = function() {
element.dialog({
height: attributes.height,
width: attributes.width
});
};
scope.close = function() {
element.dialog("close");
};
},
post: function(scope, element, attributes) {
scope.open();
element.on("dialogclose", function(){
if(scope.dialog){
scope.dialog = false;
scope.$apply();
}
});
}
},
};
});
Rest of the code is here.
https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info
Your routing code should be in the first module which is the main module. I feel that's where your problem is, I am not on a PC right now to be able to replicate your code and test. But change that first.
I created an ng-sortable example in Plunker but it's not working.
Here's the JavaScript:
angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
$scope.presidents = [
'George Washington',
'Abraham Lincoln',
'William Jefferson Clinton'
];
$scope.dragControlListeners = {
accept: function(sourceItemHandleScope, destSortableScope) { return true },
itemMoved: function(event) {},
orderChanged: function(event) {}
};
}]);
And the HTML:
<!DOCTYPE html>
<html ng-app="sortableExample">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">
<script src="script.js"></script>
</head>
<body ng-controller="PresidentsCtrl">
<ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
<li data-ng-repeat="president in presidents" data-as-sortable-item>
<div data-as-sortable-item-handle>{{ president }}</div>
</li>
</ul>
</body>
</html>
The right stuff shows up but it's not interactive like it should be. Any idea why?
You should not include links to github source -)
Since there is no cdn for ng-sortable - just copy it to plunker.
Also you forget to add dependency of ng-app.
angular.module('sortableExample', ['as.sortable'])
http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview
I have the directive that find the elements height and need to have the same value to the controller from the directive.
I tried the below mentioned code and i could not find the solution, am facing some issues.
Could anyone help me on this?
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
script.js for directive
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
scope.height = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
})
;
contoller.js for controller
angular.module('myModule', []).controller("myheight", function($scope){
$scope.numvalue = function(){
$scope.divHeight = $scope.height;
return $scope.divHeight;
}
});
You don't need $scope.numvalue();
Your directive looks fine. Just add it to the html and change code to following.
<div ng-app="myModule">
<div style="height: 300px;" my-directive ng-controller="myHeight">
Getting height {{height}}
</div>
</div>
JSFiddle
--EDIT--
Check the updated fiddle
JSFiddle
just expose a varible of controller to the directive. after compilation process of the directive you can access the scope variable divHeight in your controller.
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
scope:{
divHeight: '='
},
link: function(scope, element) {
scope.divHeight = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective div-Height="divHeight" style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
I'm trying to combine angular and the frontend framework materialize, since I find it better than angular-material. The following code works and results in a parallax scrolling sample:
<html lang="en">
<head>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="angularApp.js"></script>
</head>
<body ng-app='angularApp'>
(...)
<div class="parallax-container">
<div class="parallax"><img src="http://i3.minus.com/ibdMPM9Oo2TGYu.png" ></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="http://i3.minus.com/ibdMPM9Oo2TGYu.png" ></div>
</div>
</body>
</html>
However, this parallax effect stops working completely when I "refactor" it into a custom directive, like this:
<html lang="en">
(...)
<body ng-app='angularApp'>
(...)
<hometab></hometab>
</body>
</html>
///////
(function(){
var app = angular.module("angularApp", []);
app.directive('hometab', function(){
return{
restrict: 'E',
templateUrl: 'hometab.html'
};
});
})();
(hometab.html contains the code that used to be in the main html).
Why is this breaking the code?
Edit: To clarify, by breaking I mean that the code is inserted, but the parallax effect isn't working (I assume the javascript isn't doing its job correctly?)
Try wrapping your directive in a div and see it if works. I.e. <div hometab></div>
i experienced this issue couple days ago,
what i to do to fix this is just set transclude to be true, and set replace to be true. in case your code, it will be like this.
(function(){
var app = angular.module("angularApp", []);
app.directive('hometab', function(){
return{
restrict: 'E',
templateUrl: 'hometab.html',
transclude : true,
replace : true
};
});
})();
I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>
You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.