Question

我只需要用ng-show = true显示bouton，用ng-show = false显示目录，但是这个工作很奇怪我不知道为什么我不重写范围（ng-show =＆＃34; editNucleo＆＃34）

这是我的代码

   <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr dom-directive ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});

app.directive('domDirective', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            element.on('click', function () {
                element.html('You clicked me!');
            });
            element.on('mouseover', function () {
                $scope.editNucleo=false;
                element.css('background-color', 'yellow');

            });
            element.on('mouseleave', function () {
                element.css('background-color', 'white');
                $scope.editNucleo=true;
            });
        }
    };
});


</script>

如果有人可以帮助我

提前致谢

编辑

使用$ digest找到解决方案

我的新指令

.directive('domDirective', function() {
        // I bind the JavaScript events to the scope.
        function link( $scope, element, attributes ) {

            $scope.editNucleo = false;
            // I activate the element on mouse-enter.
            element.on('mouseenter', function () {
                    element.css('background-color', 'yellow');
                    $scope.editNucleo=true;
                    // NOTE: By calling the $digest() instead of the more typical
                    // $apply() method, we will only trigger watchers on the local
                    // scope (and its children). We will NOT trigger any watchers
                    // on the parent scope.
                    $scope.$digest();
                }
            );
            // I deactivate the element on mouse-leave.
            element.on('mouseleave', function () {
                element.css('background-color', 'white');
                    $scope.editNucleo=false;
                    // NOTE: By calling the $digest() instead of the more typical
                    // $apply() method, we will only trigger watchers on the local
                    // scope (and its children). We will NOT trigger any watchers
                    // on the parent scope.
                    $scope.$digest();
                }
            );
        }
        // NOTE: By setting scope to TRUE, the directive creates a new child scope
        // that separates it from the parent scope (creating a isolated part of
        // the scope chain).
        return({
            link: link,
            restrict: "A",
            scope: true
        });
    }
);

我对此指令没有任何潜在问题

Answer 1

我建议不要访问指令中的dom元素。相反，当dom元素发生时，你应该回调你的指令。

因此，您应该使用ng-mouseenter和ng-mouseleave个事件。我就是这样做的。请注意doShow和doHide的实现以及如何直接从模板调用它们。

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <body ng-app="myApp" ng-controller="myCtrl">
    <table>
      <tr dom-directive ng-repeat="x in records" ng-mouseenter="doShow()" ng-mouseleave="doHide()">
        <td>{{x}}</td>
        <td>
          <div ng-show="show">
            <input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
          </div>
        </td>
      </tr>
    </table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});

app.directive('domDirective', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
          $scope.doShow = () => $scope.show = true;
          $scope.doHide = () => $scope.show = false;
        }
    };
});
</script>
</body>
</html>

为什么我的指令在angularJS中很奇怪

1 个答案: