javascript - 如何以 angularjs 方式执行以下 jquery 代码

Question

我是 angularjs 的新手，想用 angularjs 的方式做以下事情

Controller

$scope.Filter = function($event, active, id) {
    html = "";
         if(active){
                    $http({method: 'GET', url: "someUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside if block</p>";                    
                    });
    $("#results-display").html(html);

               }

  else{
         $http({method: 'GET', url: "someotherUrl.json"}).
                    success(function(data, status) {

                    html+="<p>Hey i am inside else block</p>";                  
});
 $("#results-display").html(html);
    }
}

基本上我使用的是 angularjs Controller ，但我通过将 json 数据附加到 html 来在 Controller 内部执行 jquery 方式。 angularjs如何显示返回的json数据？

Answer 1

Controller 代码中应省略任何HTML 操作。如果必须在代码中完成，则使用 Angular Directive .

但在您的情况下指令不是必需的。要 Angular 化您的示例，您应该只设置一个范围属性(我将其命名为isActive)，而是在您的标记中提供正确的 HTML 显示，因为范围模型是您之间的通信Javascript Controller 代码和您的 HTML View 。

Javascript

$scope.Filter = function($event, active, id) {
    if(active) {
        $http({
            method: 'GET',
            url: "someUrl.json"
        })
        .success(function(data, status) {
            // set $scope property
            $scope.isActive = true;
        });
    }
    else {
        $http({
            method: 'GET',
            url: "someotherUrl.json"
        })
        .success(function(data, status) {
            $scope.isActive = false;
        });
    }
};

这段代码可以很容易地变得更短并且仍然做同样的事情。

$scope.Filter = function($event, active, id) {
    $http({
        method: "GET",
        url: active ? "someUrl.json" : "someotherUrl.json"
    })
    .success(angular.bind(active, function(data, status) {
        $scope.isActive = this;
    }));
};

HTML

<div id="results-display" ng-switch="isActive">
    <p ng-switch-when="true">Hey i am inside if block</p>
    <p ng-switch-when="false">Hey i am inside else block</p>
</div>

如果你不在代码中的任何地方使用这个 div，你可以完全省略它的 ID 属性，因为 Angular 属性会相应地起作用。

更复杂的操作

如果此示例是更复杂的实际代码的简化版本(如果它不只是关于是否处于事件状态)，您还可以在 Controller 中设置文本值，然后在 HTML 中绑定(bind)到它。只要值是严格的原始值并且不涉及 HTML，这样做就没有错。任何其他范围属性也只是原语或对象/原语的对象。它们都只是数据。

...
$scope.activityText = "Hey i am inside if block";
...

然后在 HTML 中简单地绑定(bind)到这个范围属性

<div id="results-display">
    <p ng-bind="activityText"></p>
</div>

这意味着无论何时您更改 $scope.activityText 值(无论是在您的 .Filter 函数中还是其他任何地方)，它都会相应地反射(reflect)在您的 HTML 中。

您还可以使用 {{}} 使用不同的表示法，但我更喜欢 ng-bind 属性，因为它不需要您也输入 ng-cloak 在元素上到 prevent unusual display在 Angular 开始之前。