在angular中，是否可以在运行控制器之前让指令将变量添加到作用域？

Question

I'm setting up a directive which can't have an isolated scope because there are going to be other directives (which are 3rd party) which are already using it. I need to get the reference of a third party object and pass it to the controller as a variable. How can I do this?

angular.module('myModule')
    .directive('objectSync', ['$thirdParty', function ($thirdParty) {
    return {
      compile: function() {
          return {
              pre: function(scope, element, attrs) {
                  var thirdPartyObject = $thirdPartyObject.getCurrentScopeObject();
                  scope[attrs.objectSync] = thirdPartyObject;
              }
          };
       }
    };
}]);

And this is the html:

<third-party-directive
    sync-object-to-controller="objectToSync">

When I do this, objectToSync never makes it to the controller's scope. But if I set up a container object in the scope: $scope.containerObject = {} , in the directive instead of adding it right to the scope I add it there: scope.containerObject[attrs.objectSync] = thirdPartyObject; , then it makes it through, but I can only call it/attach listeners to it using watch: $scope.$watch(function(){ return $scope.containerObject; } ...

So how can I pull an object from a third party from within the scope of the third party directive and pass it into the root of the controller's scope with a name specified in my own directive before the controller runs?

Answer 1

You need to receive the parameter passed to third-party-directive.

angular.module('myModule')
    .directive('objectSync', ['$thirdParty', function ($thirdParty) {
        return {
            scope : {syncObjectToController : '='} //this receives the parameter
                //the hyphen separated name gets converted to camel casing
            compile: function() {
            return {
                pre: function(scope, element, attrs) {
                    //now you can directly use the third party object here directly
                    var thirdPartyObject = scope.syncObjectToController
                }
            };
         }
     };
}]);

Read more about it in angular's documentation of directives.