Question

请查看我的JSFiddle

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

我想将此交互隔离到一个允许我复制而不会发生冲突的指令中。
我将彩色涂在盒子上供参考

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

JS

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

Answer 1

奇怪的互动，但没关系。您不需要为每个指令使用相同的范围，因为您希望它们被隔离。我只是通过为具有共享模板的指令创建范围来实现此目的。

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

其他一些事情：不要通过外部资源和小提琴的框架部分包括角度。它在你的dom上运行两次角度，表现得很奇怪。此外，还有ng-mouseenter和ng-mouseleave指令，因此您不需要实施这些指令。

更新的小提琴是here

希望这有帮助！

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

1 个答案: