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

I am new to angularjs and want to do the following in angularjs way

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

Basically i have used angularjs controller, but i am doing the jquery way inside the controller by appending the json data to html. How do i display returned json data in angularjs way?

基本上我已经使用了angularjs控制器,但是我通过将json数据附加到html来在控制器内部执行jquery方式。如何以angularjs方式显示返回的json数据?

1 个解决方案

#1

Any HTML manipulation should be omitted from controller code. If it has to be done in code, then use an Angular Directive.

控制器代码中应省略任何HTML操作。如果必须在代码中完成,则使用Angular Directive。

But in your case directive is not required. To angularize your example you should merely set a scope property (I've named it isActive) and rather provide correct HTML display in your markup because scope model is the communication between your Javascript controller code and your HTML view.

但在你的情况下,指令不是必需的。要对您的示例进行角度化,您应该只设置一个范围属性(我将其命名为isActive),而是在标记中提供正确的HTML显示,因为范围模型是Javascript控制器代码与HTML视图之间的通信。

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

This code can easily be made shorter and still do the same thing.

这段代码可以很容易地缩短,但仍然可以做同样的事情。

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

If you don't use this div anywhere in the code, you can omit its ID attribute altogether because angular attributes will act accordingly.

如果您不在代码中的任何位置使用此div,则可以完全省略其ID属性,因为角度属性将相应地起作用。

More complex manipulation

In case this example is a simplified version of a more complex actual code (in case it's not just about being active or not) you can also set your text value in your controller and then bind to it in HTML. Nothing's wrong in doing this as long as values are strictly primitives and there is no HTML involved. Any other scope properties are also just primitives or objects of objects/primitives. They're all just data.

如果此示例是更复杂的实际代码的简化版本(如果它不仅仅是活动或不活动),您还可以在控制器中设置文本值,然后在HTML中绑定它。只要值是严格的原语并且不涉及HTML,这样做就没有错。任何其他范围属性也只是对象/基元的基元或对象。他们都只是数据。

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

And then in HTML simply bind to this scope property

然后在HTML中简单地绑定到此范围属性

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

This means that whenever you change $scope.activityText value (be it in your .Filter function or anywhere else) it will reflect in your HTML accordingly.

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

You could also use a different notation using {{}} but I prefer the ng-bind attribute as it doesn't require you to also put ng-cloak on the element to prevent unusual display before Angular kicks in.

您也可以使用{{}}使用其他符号,但我更喜欢ng-bind属性,因为它不需要您在元素上放置ng-cloak以防止在Angular启动之前出现异常显示。