AngularJS ng-click doesnt work from partial view

Question

I want to create the step by step actions without inserting something into the address line. And I stumbled upon a problem.

Here is my parent page:

<html ng-app="Steps">
<head>
    <script src="../../Content/script/angular.js"></script>
    <script src="../../Content/script/jquery-1.7.1.js"></script>
    <script src="../../Content/script/Partials2.js"></script>
    <link rel="stylesheet" href="../../Content/css/bootstrap.css"/>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body ng-controller="StepCtrl">
    <div id="container" ng-template-controller-action="Steps/StepOne">
    </div>
</body>
</html>

my js:

var step = angular.module("Steps", []);

step.directive("ngTemplateControllerAction", function ($compile, $http) {
    return {
        link: function ($scope, element, attrs) {
            $http({ method: "GET", url: attrs.ngTemplateControllerAction }).
            success(function (data) {
                $(element).html($compile(data)($scope));
            });
        }
    };
});

step.controller("StepCtrl", function ($scope) {
    $scope.goToSecondStep = function () {
        console.log(1);
    };

    $scope.goToFirstStep = function () {
        console.log(1);
    };
});

partial view1:

<div>First step</div>
<button class="btn" ng-click="goToSecondStep()">Second Step</button>

partial view2:

<div>Second step</div>
<button class="btn" ng-click="goToFirstStep()">First Step</button>

So, when I click the Second step button i want to see '1' in console, but nothing happens. What am I doing wrong?

Thanks.

Chandermani · Accepted Answer · 2014-02-26 16:35:16Z

1

Not sure but this can be done easily using ng-include

<div id="container" ng-include="pathToTheViewOnServer"> </div>

The pathToTheViewOnServer can be set in scope

$scope.pathToTheViewOnServer = Steps/StepOne;

or directly providing path in ng-include

<div id="container" ng-include="'Steps/StepOne'"> </div>

answered Feb 26, 2014 at 16:35

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

V Kharitonov Over a year ago

But how i can compile partial view? Problem is why ng-click="goToSecondStep()" doesnt work.

Chandermani Over a year ago

Partial views included using ng-include are automatically compiled.

V Kharitonov Over a year ago

There is a little problem. First partial view load properly. When I click the button value of '$scope.pathToTheViewOnServer' changes. But nothing happens. I still see the first partial view.

V Kharitonov Over a year ago

So... i find a problem with $scope. In my partial view there is own controller. But watcher waits for the change of variable form its scope. And this why nothing happens... Still looking for a solution how to change the external variable inside the internal controller.

Collectives™ on Stack Overflow

AngularJS ng-click doesnt work from partial view

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related