Question

我正在寻找一种聪明的方法来获得同样的东西 this gist

但所有可以从html标记配置

如果可能的话，摆脱$ apply。

请问你能帮帮我吗？

Answer 1

我已经改变了你的代码，我通过指令的html标记传递了user参数。

您可以使用指令中的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>

angularjs范围控制器指令，无需应用

1 个答案: