Ng-Klick-Bereich innerhalb Link der Direktive

Question

Können Sie mich beschreiben, warum ich nicht den Wert der lokalen Variablen directiveElement innerhalb link Funktion der Direktive in ng-click Methode erhalten kann?

Hier Code:

(function() { 
"use strict"; 

angular 
    .module("app") 
    .directive("cell", ABCDirective); 

function ABCDirective() { 
    return { 
     restrict: 'E', 
     template: '<div><button ng-click="doSomething()">Change background</button></div>', 
     link: function(scope, element) { 
      var directiveElement = element; 

      scope.doSomething = function() { 
       **** Uncaught ReferenceError: directiveElement is not defined(…) **** 
      }; 
     } 
    }; 
} 
})(); 

Answer 1

Sie so etwas tun kann, Hintergrundfarbe zu ändern:

return { 
      restrict: 'E', 
      template: '<div><button ng-style="{\'background-color\':myColor}" ng-click="doSomething()">Change background</button></div>', 
      link: function(scope, element) { 
       scope.myColor = 'red'; 

       scope.doSomething = function() { 
        scope.myColor = 'blue'; 
       }; 
      } 
     }; 

Answer 2

Ich würde nicht empfehlen, in einer Richtlinie CSS-Regeln anzuwenden, wenn Sie es vermeiden können. Stattdessen würde ich empfehlen, eine ng-Klasse festzulegen, damit das Stylesheet die Farbe entsprechend ändern kann.

Das heißt, einen Blick auf dieses Beispiel-Code, um von den docs Quellen:

angular.module('dragModule', []) 
.directive('myDraggable', ['$document', function($document) { 

return { 
link: function(scope, element, attr) { 
    var startX = 0, startY = 0, x = 0, y = 0; 

    element.css({ 
    position: 'relative', 
    border: '1px solid red', 
    backgroundColor: 'lightgrey', 
    cursor: 'pointer' 
    }); 

    element.on('mousedown', function(event) { 
    // Prevent default dragging of selected content 
    event.preventDefault(); 
    startX = event.pageX - x; 
    startY = event.pageY - y; 
    $document.on('mousemove', mousemove); 
    $document.on('mouseup', mouseup); 
    }); 

    function mousemove(event) { 
    y = event.pageY - startY; 
    x = event.pageX - startX; 
    element.css({ 
     top: y + 'px', 
     left: x + 'px' 
    }); 
    } 

    function mouseup() { 
    $document.off('mousemove', mousemove); 
    $document.off('mouseup', mouseup); 
    } 
} 
}; 

}]); 

Quelle: https://docs.angularjs.org/guide/directive

Was die undefinierte Variable, sollten Sie nicht den Funktionsparameter zugewiesen werden müssen eine andere Variable an erster Stelle. Können Sie den Code posten, der diesen Fehler tatsächlich auslöst? (Nicht nur die Fehlermeldung anstelle des Codes)