scope & trigger in angular1

Question

Could you point me to the right direction what I should look up in order to understand the following code about trigger: "=trigger"

app.module.directive('messageModal', function ($compile) {
    return {
        scope: {
            trigger: "=trigger",
        },

        controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
                $scope.trigger = function(title, message, modal_class, color, auto_hide){

What I understand is that by having scope: {}, the directive 'messageModal'has created a brand new scope object. BUT what does trigger: "=trigger" do? What about the $scope.trigger?

Please I need some directions on what I should learn in order to understand what the directive does. Thanks!

Answer 1

Properties within scope option are mappings between each property and an attribute in the directive markup when you're using it somewhere.

Scope's property value defines how scope properties are bound:

• = means two-way binding
• @ means literal binding.
• & means function binding.

A scope property can be provided in two ways (with any of above described bindings):

• { some: "=" } which means that scope property and its HTML attribute counterpart will share the same identifier.
• { some: "=whatever" } allows you to define how will be identified the attribute bound to the whole scope property.

Once an isolated scope has already bound properties and attributes, you'll access them injecting $scope and accessing the property: $scope.whatever.