以角度创建指令和隔离范围答案

【问题标题】：Creating a directive and Isolating scopes in angular以角度创建指令和隔离范围
【发布时间】：2014-05-04 06:04:18
【问题描述】：

请查看我的JSFiddle

在 div mouseenter/mouseleave 上，我有一个相当古怪的交互，可以打开/关闭输入复选框。如果所述复选框设置为真，则它设置相邻输入文本字段的焦点。

我想将此交互隔离到一个指令中，这样我就可以在没有冲突的情况下进行复制。
我已经给盒子涂上了颜色以供参考

<body ng-app="ngApp" ng-controller="MainCtrl">
  <div class="row">

    <div class="span2 box red" leave-edit="uncheckInputBox(false)" enter-edit="checkInputBox(true)">hover</div>

    <span class='span8'>
      <p>red</p>
      <input type="checkbox" ng-model="isChecked">
      <input xng-focus='isChecked' ng-model="editingInput">
      {{isChecked}}
      {{editingInput}}
    </span>

  </div>


  <div class="row">

    <div class="span2 box blue" leave-edit="uncheckInputBox(false)" enter-edit="checkInputBox(true)">hover</div>

    <span class='span8'>
      <p>blue</p>
      <input type="checkbox" ng-model="isChecked">
      <input xng-focus='isChecked' ng-model="editingInput">
      {{isChecked}}
      {{editingInput}}
    </span>

  </div>



  </div>

var app = angular.module('ngApp', [])

app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.isChecked = false;

    $scope.$watch('isChecked', function(newV){
      newV && $('#name').focus();
    },true);

    $scope.checkInputBox = function(val) {
      $scope.isChecked = val;
    };

    $scope.uncheckInputBox = function(val) {
      $scope.isChecked = val;
    };

}]);

app.directive('xngFocus', function() {
    return {



      link: function(scope, element, attrs) {
       scope.$watch(attrs.xngFocus, 
         function (newValue) { 
            newValue && element.focus();
         },true);
      }
    };
});
app.directive('leaveEdit', function(){
  return function(scope, element, attrs) {
  element.bind('mouseleave', function() {
    scope.$apply(attrs.leaveEdit);
  });
  };
});

app.directive('enterEdit', function(){
  return function(scope, element, attrs) {
  element.bind('mouseenter', function() {
    scope.$apply(attrs.enterEdit);
  });
  };
});

css

.box {
  height:50px;
  cursor:pointer;
  color: #fff;
  text-align: center;
}
.red {
    background: red;
}
.blue {
  background: blue;
}

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

奇怪的互动，但还好。您不需要为每个指令使用相同的范围，因为您希望它们被隔离。我只是通过为具有共享模板的指令创建范围来做到这一点。

app.directive('why', function() {
    return {
        scope: {},
        link: function($scope, elt, attrs) {
             //setup in here
        }, ...

其他一些事情：不要通过外部资源和小提琴的框架部分包含角度。它在你的 dom 上运行两次，并且会表现得很奇怪。还有 Angular 中的 ng-mouseenter 和 ng-mouseleave 指令，所以你不需要实现它们。

更新的小提琴是here

希望这有帮助！

【讨论】：