AngularJS ng-click在部分视图中不起作用

时间:2014-02-26 16:24:23

标签: jquery asp.net-mvc angularjs

我想创建一步一步的操作,而不在地址行中插入内容。 我偶然发现了一个问题。

这是我的父页面:

<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>

我的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);
    };
});

部分观点1:

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

部分观点2:

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

所以,当我点击第二步按钮时,我想在控制台中看到'1',但没有任何反应。我做错了什么?

感谢。

1 个答案:

答案 0 :(得分:1)

不确定,但可以使用ng-include

轻松完成此操作

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

可以在范围

中设置pathToTheViewOnServer

$scope.pathToTheViewOnServer = Steps/StepOne;

或直接在ng-include

中提供路径

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