处理“ Controller As”语法时，如何访问隔离范围API字段？

Question

I have a code which allows to select a place from Google maps.

When you select a place , it shows you what you've selected and its LAT/LON :

You can see it here

But that code is not using the controller as syntax.

So I've changed it:

• Controller change :

• Html change :

• Directive change:

Here is the NEW code

But now when I select a place - it doesn't update the values.

Question

How can I fix my code so that it will still interact via :

scope: {
        details: '=',
        ngAutocomplete: '=',
        options: '=',
        lt:'=',
        ln:'=',
      }

(When I move to controller as )

I mean - shouldn't I use the controller ( not the scope ) in :

link: function(scope, element, attrs, controller) ??

What am I missing ?

If they say that now ( "controller as" syntax ) the controller is our viewModel so I don't see anything wrong with using the controller parameter and access :

controller.lt = ...;
controller.ln = ...;

And I'm obviously wrong here ...

Answer 1

You seem to be jumbling up a few concepts because you're trying to use the same controller both in your directive and outside it.

Even if you're using controller As outside your directive, the implementation inside your directive should stay the same. The whole point is that the directive should not care what's going on outside of it. The scope: {} option allows you to tell the directive which values to put on its own scope, based on the attribute values provided.

So the answer is to leave your directive code unchanged from your original example, and everything will work.

Working plnkr: http://plnkr.co/edit/xyTX95JA2biYJmWPKxzZ?p=preview

Side note: You should avoid prefixing your components with ng . The ng prefix is intended for components that are built into Angular, and you should use your own prefix.

Answer 2

I ended up using $scope.$watch();

$scope.$watch(function() {
  return vm.location_result;
}, function(location) {
    if (location) {
       // do something
    }
});

Fiddle Example: http://jsfiddle.net/n3ztwucL/

GitHub Gist: https://gist.github.com/robrothedev/46e1b2a2470b1f8687ad