在AngularJS中，如何将$ scope传递给作用域？

Question

I'm a bit confused with the use of $scope in controllers and of scope in directives. Please verify if my understanding is correct (and also provide some alternative ways how to do this).

Let's say I have an html:

<div ng-controller="app1_Ctrl">
    .
    .
    .
    <input type="text" ng-model="value"/>
    <input type="checkbox" />
    <button ng-click="submit()"></button>

</div>

And my main.js

(function() {

   angular.module('mainApp', ['app1']);

})();

And my app1 looks like this (based on official AngularJS documentation here )

(function() {

    var app = angular.module('app1', []);

    app.controller('app1_Ctrl', ["$scope", function($scope) {
        .
        .
        .
    }]);

    app.directive('app1_Dir1', [function() {

        function link(scope, element, attr) {

            scope.$watch(attr.someAttrOfCheckBox, function() {
                // some logic here
            });

            function submit() {
                // some logic here
            }


        }

        return link;

     }]);

})();

How does $scope.value passed in scope in directive so that I can do some manipulations there? Will ng-click fire the function submit() in the directive link? Is it correct to use scope.$watch to listen for an action (ticked or unticked of course) in checkbox element?

Many thanks to those who can explain.

Answer 1

By default, directive scope is controller $scope; but it means the directive is directly dependent on your controller and you need a different controller for each instance of the directive you want to use. It is usually considered a best practice to isolate your directive scope and specifically define the variables you wish to pass it from your controller. For this, you will need to add a scope statement to your directive :

scope {
   label :'@',
   context : '=',
   function : '&'
}

and update your view :

<my-directive label="labelFromController" context="ctxtFromController" function="myFunction()" ></my-directive>

The symbols denote the kind of thing you wish to pass through : @ is for one-way binding (as a string in your directive), = is for two-way binding of an object (which enables the directive to update something in your controller), and & is for passing a function. There are a lot of additional options and subtleties that are best explained by the Angular doc https://docs.angularjs.org/guide/directive . There are also some nice tutorials out there (eg http://www.sitepoint.com/practical-guide-angularjs-directives/ )

• Your submit() function is not attached to anything, so you won't be able to call if from your viewer. You need to define it as scope.submit = function() ... in your link function if you wish to access it.
• You can use $watch for this kind of thing, but there are usually other more elegant ways to achieve this by leveraging the fact that angular already "watches" the variables it is aware of and monitors any changes he can (this can be an issue when some external service changes data for exemple, because angular cannot listen to events it is not made aware of). Here, you can probably simply associate the ng-model directive to your input checkbox to store its true/fale (checked/unchecked) value, and the ng-change or ng-click directives to act on it. The optimal solution will mostly depend on the exact nature of your business logic.

Some additional thoughts :

• The HTML insides of your directive should be packaged in an inline template field, or in a separate HTML file referenced by the templateUrl field in your directive.
• In your HTML code above, your directive is not referenced anywhere. It should be an element, attribute or class (and your directive definition should reflect the way it can be called, with the restrict field). Maybe you have omitted the line containing the directive HTML, but as it stands, your directive doesn't do anything.
• To my knowledge, you don't need to return link. Think of it as the "body" of your directive, where you define the variables and functions you will call in the HTML.
• Your directive doesn't actually need HTML code and the above thoughts might be irrelevant if you are going in a different direction, but encapsulating some kind of view behaviour that you want to reuse is probably the most common use of directives.