-1

I'm using angularJS to make a SAP. The problem I am having is within one of my template files.

I want to set the value of ng-click directive using a variable declared in that controller. Based on the change in the value of that variable the value of ng-click should change. Here's an example of the problem:

<p>Set page content template via button click</p>
<!-- Actual values of ng-click without variables -->
<button ng-click="template='page1'">Show Page 1 Content</button>
<button ng-click="template='page2'">Show Page 2 Content</button>

<!-- What I have tried

Declaring a scope variable 'page', and setting it's value to 'page1' as

        $scope.page = "page1";

<button ng-click="template=page">Show Page 1 Content</button>
<button ng-click="template='{{page}}'">Show Page 1 Content</button>
<button ng-click="template=(page)">Show Page 1 Content</button>

Also tried declaring the variable as

$scope.page = "template='page1'"; or $scope.page = template='page1'

And inject like:

<button ng-click=page>Show Page 1 Content</button>
and also using (page), {{page}}, page ; with and without quotes

-->

<ng-include src="template"></ng-include>

<script type="text/ng-template" id="page1">
    <p>This is content of page 1</p>
</script>

<script type="text/ng-template" id="page2">
    <p> This is content of page 2</p>
</script>

The value of ng-click should be based on what is the value of that variable assigned to it.

Edit:

Just found out that we can only make calls to functions, using ng-click directive, and not to a variable. So, a variable can't be assigned. But I can't say if it's still true, and there is still no way to do it.

Question Link: Angular JS set dynamic value into ng-click directive

But is there any other way I can achieve this. Any help will be really appreciated. Thank you.

Community
  • 1
  • 1
ZeroFlex
  • 74
  • 9
  • Basically building a poor man's router. Look into using `ngRoute` router or `angular-ui-router`. Benefits of router will be url will match template based on whatever naming convention you want to use and each route will have own controller – charlietfl Jun 05 '16 at 00:07
  • You can do variable setting in `ng-click`. Answer you linked to is pointing out that you can't use interpolation `{{}}` in ng-click expression which is different – charlietfl Jun 05 '16 at 00:29
  • @charlietfl Well I have used ngRoute also. Originally I was injecting variables values into the view based on the url, having only one template whose content changed dynamically based on url location. But I'm making this website with other fellow developers (just to say) in my team who are not as comfortable with web development and not all with angular. Using templates and include, makes it easier for them to find and edit their part using plain HTML. – ZeroFlex Jun 05 '16 at 00:31
  • Yeah you're right. As I said just wanted to know if it's still the same, or there is any other way to achieve what I want. – ZeroFlex Jun 05 '16 at 00:34
  • Seems like a strange reason to dummy down the approach when ngRoute's `$routeParams` and `$location.search()` are not complicated to use. Not only that but if one person set the routes up the controllers would still work the same as using `ng-include` – charlietfl Jun 05 '16 at 00:35
  • Well I wish you were my team member than. I guess I have to drop this for now. Anyways thank you. – ZeroFlex Jun 05 '16 at 00:38
  • Also even better would be nested views in angular-ui-router. Conversion from ngRoute is not time consuming and gain in features/capabiliteis is very significant – charlietfl Jun 05 '16 at 00:40
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113825/discussion-between-charlietfl-and-nav042). – charlietfl Jun 05 '16 at 00:42

2 Answers2

1

The simplest way I can think of would be to make a function that takes the page number as a parameter on your controller and use it to set the page number variable on the controller.

$scope.pageNumber = 1;
$scope.setPage = function(pageNumber) {
    $scope.pageNumber = pageNumber
};

Then call the controller function passing it the page you want.

<button ng-click="setPage(1)">Show Page 1 Content</button>
<button ng-click="setPage(2)">Show Page 2 Content</button>
Kenny Pederson
  • 31
  • 4
  • I think there's some confusion. I don't want to set a variable's a value using ng-click, but set the value of the ng-click based on the variable's value. Simply if x = "page1", then ng-click = x, should be same as ng-click="page1"; that what i wanted to achieve. – ZeroFlex Jun 05 '16 at 00:17
  • @Nav042 no reason example in your code that you say doesn't work shouldn't work `ng-click="template=page"` but still better to use function and put the logic in controller as shown in this answer. **Use a router** ... non of this problem would exist and you have well documented examples to work from – charlietfl Jun 05 '16 at 00:25
  • Same idea, just pass the value from the controller instead of a static number. http://plnkr.co/edit/pJwGsDlrkiSQAvZU5CyM?p=preview – Kenny Pederson Jun 05 '16 at 00:31
  • @Kenny let me try to explain it again more clearly using your own example. What if i wanted to change the value - "setPage(desiredPage)" to something like - "setMeNow(NoPageDesired)", on clicking the button. In your example you changed the value using ng-click, but cleary said - I don't want to change the value of any variable, but the value of directive. I'm srry for this. Thanks a lot for your efforts buddy. – ZeroFlex Jun 05 '16 at 00:48
0

Try this:

    <button ng-click="template='page1.html'">Show Page 1 Content</button>
    <button ng-click="template='page2.html'">Show Page 2 Content</button>
    <ng-include src="template"></ng-include>

Although I would strongly recommend using directives or components instead of ng-include.

Plunkr

GBa
  • 17,509
  • 15
  • 49
  • 67
  • That's what I have been using. But I want the value of ng-click to change based on a variable's value. – ZeroFlex Jun 05 '16 at 00:10
  • This is not possible AFAIK. You're asking for an eval() statement which is probably too big of a security risk. I would look at Kenny's answer and move the logic into a function. – GBa Jun 05 '16 at 00:11
  • Kenny's answer would be correct if i wanted to set a variable's value using ng-click. You can see the comment on his answer. For the eval() function, I know the security concern, still tried it,, didn't worked for me. – ZeroFlex Jun 05 '16 at 00:23
  • It's not possible to do this. – GBa Jun 05 '16 at 00:28