Javascript 创建指令并隔离角度中的作用域
请查看我的 我有一个非常棒的交互，在div mouseenter/mouseleave上切换输入复选框的开/关。如果所述复选框设置为true，则设置相邻输入文本字段的焦点 我想将此交互隔离成一个指令，允许我复制而不产生冲突。Javascript 创建指令并隔离角度中的作用域,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,请查看我的 我有一个非常棒的交互，在div mouseenter/mouseleave上切换输入复选框的开/关。如果所述复选框设置为true，则设置相邻输入文本字段的焦点 我想将此交互隔离成一个指令，允许我复制而不产生冲突。 我已给箱子涂上颜色以供参考 <body ng-app="ngApp" ng-controller="MainCtrl"> <div class="row"> <div class="span2 box red" leave-edi
我已给箱子涂上颜色以供参考
<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);
});
};
});
.box {
height:50px;
cursor:pointer;
color: #fff;
text-align: center;
}
.red {
background: red;
}
.blue {
background: blue;
}
奇怪的互动，但还好。您不需要对每个指令使用相同的作用域，因为您希望它们被隔离。 我只是通过为具有共享模板的指令创建一个作用域来实现这一点
app.directive('why', function() {
return {
scope: {},
link: function($scope, elt, attrs) {
//setup in here
}, ...
ng mouseenterng mouseleave