javascript - AngularJS - 三向绑定(bind)

Question

我正在创建一个可以从内部和外部更新的指令。该指令只是一个包含图标、标题和加载状态的框。从外部更新此指令是通过隔离范围参数完成的。从内部更新它需要 inner 指令要求“框指令”的 Controller 并使用其中的函数。

我想知道这是否是解决此问题的最佳实践(事件不是一个选项)8-)

指令:

(function () {
'use strict';
var app = angular.module('mainApp');

app.directive('arBox', function () {
//        You can set the title of this box, the icon and the loading status     both from outside this directive and from 
//        inside. Use isolate scope params to update it from outside, or     require 'arBox' to update it from inside. If you are
//        updating params from inside use this directives controller methods.

    return {
        restrict: 'E',
        templateUrl: 'templates/mainApp/arBox.html',
        transclude: true,
        scope: {
            boxTitle: '=',
            boxIcon: '=',
            boxLoading: '=',
        },
        controller: 'boxController',
        controllerAs: 'boxCtrl',

        link: function (scope, element, attrs) {


            scope.$watch('boxTitle', function (newVal, oldVal) {
                scope.boxCtrl.changeTitle(newVal);
            });

            scope.$watch('boxIcon', function (newVal, oldVal) {
                scope.boxCtrl.changeIcon(newVal);
            });

            scope.$watch('boxLoading', function (newVal, oldVal) {
                if (newVal) {
                    scope.boxCtrl.loadingOn();
                } else {
                    scope.boxCtrl.loadingOff();
                }
            });



        }

    }

});
})();

Controller :

(function () {
'use strict';
var app = angular.module('mainApp');
app.controller('boxController', function ($scope, $interval) {
    var self = this;
    this.loading = true;

    this.loadingOn = function(){self.boxLoading = true;};
    this.loadingOff = function(){self.boxLoading = false;};
    this.changeIcon = function(icon){
        self.boxIcon = icon;
    }

    this.changeTitle = function(title){
        self.boxTitle = title;
    }

});
})();

Answer 1

我对这个特定问题采取的方法只是在需要从外部更改时重新创建指令。这将允许指令的交互工作从不依赖于其父项，从而完成指令的用途，即功能封装。