Here is my angular controller:
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', ['$scope', '$sce', function ($scope, $sce) {
$scope.greeting = 'my test goes here';
$scope.url = "http://google.com";
var shartthis = "<div addthis-toolbox class='addthis_toolbox addthis_default_style addthis_32x32_style' addthis:url='{{url}}' ng-attr-addthis:title='{{greeting}}'><a class='addthis_button_facebook'></a><a class='addthis_button_twitter'></a> <a class='addthis_button_google_plusone_share'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a> <script type='text/javascript'>var addthis_config = {'data_track_clickback': false, 'data_track_addressbar': false ,};</script></div>";
$scope.shartthishtml = $sce.trustAsHtml(shartthis);
} ]);
and this is my HTML page :
<body ng-controller="GreetingController" ng-model="greeting">
<div ng-model="greeting">
{{greeting}}
</div>
<div ng-bind-html="shartthishtml"></div>
Sharethis button is displaying but when share something it display Angular syntax not its value.
no any console error
myApp.controller('GreetingController', ['$scope', '$sce', function ($scope, $sce) {
$scope.greeting = 'my test goes here';
$scope.url = "http://google.com";
var shartthis = "<div addthis-toolbox class='addthis_toolbox addthis_default_style addthis_32x32_style' addthis:url='{{url}}' ng-attr-addthis:title='{{greeting}}'><a class='addthis_button_facebook'></a><a class='addthis_button_twitter'></a> <a class='addthis_button_google_plusone_share'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a> <script type='text/javascript'>var addthis_config = {'data_track_clickback': false, 'data_track_addressbar': false ,};</script></div>";
$scope.shartthishtml = $sce.trustAsHtml(shartthis);
} ]);
<body ng-controller="GreetingController">
<div>{{greeting}}</div>
<div ng-bind-html="shartthishtml"></div>
</body>
Related
I'm starting using Angular JS to build a mobile application with Ionic.
I'm trying a thing very simple but it does not work.
HTML
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<div ng-controller="MyCtrl2">
Hello, {{name}}!
</div>
<button ng-controller="MyCtrl" ng-click="MyCtrl.test()">click</button>
JS
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Name 1';
$scope.test = function () {
$scope.name = 'Name on click !';
}
}
function MyCtrl2($scope) {
$scope.name = 'Name 2';
}
I have a similar structure in my Ionic App.
I need to modify the "$scope.name" from another template.
Thanks for help.
JSFiddle : http://jsfiddle.net/ADukg/6649/
This Fiddle will provide you with a working copy of your code.
<div ng-controller="MyCtrl">
<div>
Hello, {{name}}!
</div>
<div ng-controller="MyCtrl2">
Hello, {{name}}!
</div>
<button ng-click="test()">click</button>
</div>
(function() {
function MyCtrl($scope) {
$scope.name = 'Name 1';
$scope.test = function() {
$scope.name = 'Name on click !';
};
}
function MyCtrl2($scope) {
$scope.name = 'Name 2';
}
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
.controller('MyCtrl2', MyCtrl2);
})();
You missed the following:
Assigning your controllers to your module
Wrapping the required template html in your ng-controller instead of
declaring it twice.
To modify scope from another controller you need to use either
$rootScope or angular js sevice .
Here is the $rootScope example:
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
})
.controller('myCtrl2', function($scope, $rootScope) {
$scope.change = function() {
$scope.test = new Date();
};
$scope.changeRs = function() {
$rootScope.test = new Date();
};
$scope.getOrig = function() {
return $rootScope.test;
};
})
I am new to Angularjs and currently practising it .I have a simple example like this .
My View Index.cshtml
<div ng-app="MyApp">
<div class="show-scope-demo">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController1">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController2">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
</div>
and my controller is MyJsScript.js
(function (angular) {
angular.module('MyApp', []).controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
in this case I am getting error
"[ng:areq] Argument 'MainController' is not a function, got undefined"
But if I am changing my controller like this
(function (angular) {
var myApp = angular.module('MyApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
myApp.controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
myApp.controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
It is working perfectly without any error .
Can anyone please tell me what is the exact difference between these two syntax.
Every time you call
angular.module('MyApp', [])
you're defining a new module named "MyApp" (and thus effectively overwrite the module that was previously defined with the same name).
To get a reference to a previously defined module named "MyApp", the correct syntax is
angular.module('MyApp')
without the array of dependencies.
When trying to redirect to an external page using $window.location.href, the page is just refreshing and not redirecting to the expected URL.
<html ng-app="myApp">
<head>
</head>
<body ng-controller="myCtrl">
<p> <button>Click me to redirect from template</button></p>
<p ng-click="myFunction()"> <button>Click me to redirect from controller</button></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($window,$scope){
$scope.myFunction = function(){
$window.location.href = 'http://www.google.com'; //You should have http here.
}
});
</script>
</body>
</html>
This works for me.
pdmApp.controller('projectionDetailController', [ '$log', 'projectionDetailService', '$filter', '$window', '$location', '$scope', function ($log, pdService, $filter,$window,$location, $scope) {
$scope.backToPreviousPage = function () {
alert("function is working"); //Add this line to your code to confirm your function is called.
$window.location.href = "http://localhost:port/../sample2.aspx";
}
} //What is this bracket for?
}]); //you are missing this square bracket.
Change To
pdmApp.controller('projectionDetailController', ['$log', 'projectionDetailService', '$filter', '$window', '$location', '$scope', function($log, pdService, $filter, $window, $location, $scope) {
$scope.backToPreviousPage = function() {
alert("function is working"); //Add this line to your code to confirm your function is called.
$window.location.href = "http://localhost:port/../sample2.aspx";
};
]);
I created an injectable value used in the entire application. Recently, I want to change it value. Here is the simulation of my situation:
angular.module('app', ['ngRoute']) // Create a value
.value('myValue','foo');
angular.module('app')
.controller('firstCtrl', ['$scope', '$filter', 'myValue', function($scope, $filter, myValue){
myValue = 'bar';
console.log(myValue); // bar
}])
.controller('secondCtrl', ['myValue', function(myValue){
console.log(myValue); // foo
}]);
However, the value of myValue didn't change at all, as you can see in the secondCtrl. How can I change this value? Any suggestion would be appreciated.
Google 'angular dot rule', and you've got twice defined app module.
Please see demo below.
var app = angular.module('app', []);
angular.module('app') // Create a value
.value('myValue', {
data: 0
});
app.controller('homeCtrl', function($scope, myValue) {
$scope.value = myValue;
$scope.update = function() {
myValue.data = 8;
}
});
app.controller('secondCtrl', function($scope, myValue) {
$scope.value = myValue;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="app">
<div ng-controller="homeCtrl">
<button ng-click="update()">update</button>
<br/>home: {{value.data}}
</div>
<hr/>
<div ng-controller="secondCtrl">
second: {{value.data}}
</div>
</div>
</body>
I am using
<div ng-controller="DailyReportsController">
<iframe ng-src="{{content}}" style="width:100%;height:100%;"></iframe>
</div>
to include 'pdf' file in html page. The corresponding controller is given below
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce',
function($scope, $state, $rootScope, mainWebService, $http, $sce) {
angular.element(document).ready( function() {
var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.content =$sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
}
]);
But following error raises
TypeError: Cannot read property 'nodeName' of undefined
at La (http://localhost:8080/flipxl/scripts/angular.min.js:142:109)
at Object.Kb.$set (http://localhost:8080/flipxl/scripts/angular.min.js:65:380)
at Object.fn (http://localhost:8080/flipxl/scripts/angular.min.js:63:358)
at k.$digest (http://localhost:8080/flipxl/scripts/angular.min.js:109:172)
at k.$apply (http://localhost:8080/flipxl/scripts/angular.min.js:112:173)
at h (http://localhost:8080/flipxl/scripts/angular.min.js:72:454)
at w (http://localhost:8080/flipxl/scripts/angular.min.js:77:347)
at XMLHttpRequest.z.onreadystatechange (http://localhost:8080/flipxl/scripts/angular.min.js:78:420)
Have any solution please share with me
Works perfectly fine for me when adding a $scope.$apply because of the ready event and fixing the missing braces (DEMO, iframes unfortunately don't seem to work in SO snippets).
I was not able to reproduce your error though.
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce', function($scope, $rootScope, $http, $sce) {
angular.element(document).ready( function() {
//var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.$apply(function() {
$scope.content = $sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
});
});
}]);
You can use directive feature for this as below.
var ngApp = angular.module("ngApp",[]);
ngApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
ngApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
and html like below
<div style="height:100%" pdf-loader></div>
Take a look at running example for this at http://jsbin.com/quzoyiloke , And code at http://jsbin.com/quzoyiloke/3/edit?html,js
You can also try by creating new html file whose content is as following.
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
myApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
</script>
</head>
<body ng-app="ngCtrl">
<div ng-controller="ngCtrl">
<div style="height:100%" pdf-loader></div>
</div>
</body>
</html>