Question

我正在尝试编写我的第一个 angular.js 应用程序，而不是使用 jQuery 。

有许多REST调用都有自己的ng-controller。

我正在尝试更改DIV声明中ng-controller的值，以输出不同的REST结果。

我已经让REST调用工作并显示数据，所以现在我想使用按钮来选择要在主DIV中检索和显示的REST数据。我试图更改DIV中的ng-controller值。它更改了值，但它没有执行新的ng-controller函数。

所以为了得到帮助，我试图创建一个jsFiddle，但由于按钮不起作用，我已经做了一些基本错误，更不用说使用一组新值更改ng-controller。我在jsFiddle中启动角度控制器显然是错误的或缺失的。

小提琴My jsFiddle Effort

可能有另一种解决方案，但我找不到。

Answer 1

你不应该像这样动态切换控制器。这是一种更标准的方式来做你想做的事情：

http://jsfiddle.net/robianmcd/v2cLS/

HTML

<div ng-app ng-controller="MyCtrl as ctrl">
    <button ng-click="ctrl.makeRestCall1()">Make Call 1</button>
    <button ng-click="ctrl.makeRestCall2()">Make Call 2</button>
    <hr>
    <p>{{ ctrl.dataFromLastRestCall }}</p>
</div>

JS

var MyCtrl = function($http) {
    this.$http = $http;
};

MyCtrl.prototype.makeRestCall1 = function() {
    //TODO: make call with http
    //this.$http.get(...);

    this.dataFromLastRestCall = "made rest call 1";
}

MyCtrl.prototype.makeRestCall2 = function() {
    //TODO: make call with http
    //this.$http.get(...);

    this.dataFromLastRestCall = "made rest call 2";
}

另请注意，在Angular中，您很少需要让您的Javascript直接与DOM交互。使用document.getElementById()并不比使用JQuery（大多数情况下）好。

Answer 2

尝试这个干净的代码，Angular JS

的漂亮结构

<强> HTML

<div ng-app='myApp'>
    <div ng-controller="Controller">
        <button ng-click="clickRestOne()">Rest1 Call One</button>
        <button ng-click="clickRestTwo()">Rest2 Call Two</button>
        <hr></hr>
        <div style="width:50px;height:50px;" id="MainDiv">
            <p>{{emptyData}}</p>
        </div>
    </div>
</div>

<强>脚本

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope,  $http) {
    $scope.clickRestOne = function () {
        $http({
        method : 'GET',
        url : 'your url',
        }).success(function(data, status, headers, config)
        {   
            document.getElementById("MainDiv").innerHTML = data;        
        }).error(function(data, status, headers, config)
        {
        });
    }
     $scope.clickRestTwo = function () {
        $http({
        method : 'GET',
        url : 'your url',
        }).success(function(data, status, headers, config)
        {   
            document.getElementById("MainDiv").innerHTML = data;        
        }).error(function(data, status, headers, config)
        {
        });
    }
});

Angular.js与JsFiddle并动态更改ng-controller值

2 个答案: