-1

我正在寻找一个聪明的方法来获得同样的 这个要点

但所有可配置的 html 标记

并尽可能摆脱 $apply。

请问你能帮帮我吗 ？

4

1 回答 1

1

我稍微更改了您的代码，并user通过指令的 html 标记传递参数。

您可以使用scope指令中的属性包含尽可能多的其他参数。你可以在这里读更多关于它的内容。（http://docs.angularjs.org/guide/directive）

尽管您仍然需要使用$apply()- 不确定为什么要“摆脱”它。可以在指令中使用 $digest/$apply 来让 Angular 知道您在异步调用或任何 DOM 操作后进行了更改。

这没有任何意义，但你不应该在控制器中使用它。

您还可以删除 jQuery 操作（如果需要）以使用更多 AngularJS 方法和ng-class. （http://docs.angularjs.org/api/ng.directive:ngClass）

你可以在这里看到一个有效的 Plunk ( http://plnkr.co/edit/MKmFLKpyAC87UbNaV0ef?p=preview )

<!doctype html>
<html ng-app="myApp">
<head>
     <meta charset="utf-8">
</head>
<style>
    .active{
        color:red;
    }
</style>
<body>
<div ng-controller="myCtrl">
     <ul>
        <li data-ng-repeat="user in ns.users">
            <div user="user" selected-user-box="{{user.id}}" class="box-select-user">
                <h2>{{user.name}}</h2>
            </div>
        </li>
    </ul>
    <b>{{ns.test}}</b>
</div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.factory('Users',function(){
            return [{id:1,name:'first'},{id:2,name:'second'},{id:3,name:'third'}]
        });
        app.directive('selectedUserBox',  function() {
            return {
                restrict: 'A',
                replace: true,
                scope: {
                    user: '='
                },
                template:'<h2>{{user.name}}</h2>',
                link: function(scope, element, attrs) {
                    element.bind('click', function() {
                        $(this).parent().parent().find('div').removeClass('active');
                        $('.box-select-user').removeClass('active');
                        $(this).addClass('active');
                    });
                },
            };
        });
        app.controller('myCtrl',function($scope,Users){
           $scope.ns = {};
           $scope.ns.users = Users;
        });

    </script>
</body>
</html>
于 2013-09-23T16:47:35.037 回答