angularjs范围控制器指令，而不适用

问题描述：

我正在寻找一个聪明的方式来获得相同的 this gist angularjs范围控制器指令，而不适用

但是从HTML标记

所有配置，如果可能摆脱$适用。

请问您能帮我吗？

看来，在这个论坛上，你不应该问的改进/忠告^^ – Whisher

答

我已经改变了你的代码了一点，我通过指令的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）

你可以看到一个工作普拉克这里（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范围控制器指令，而不适用

相关推荐