Question

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

我想知道这是否是解决此问题的最佳做法（事件不是一种选择）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();
                }
            });



        }

    }

});
})();

控制器：

(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

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

Answer 2

我不确定你在内部和外部更新是什么意思;通过在指令中设置绑定，$ scope（和您的控制器）上的变量也会更新;您不需要在指令中添加自己的观察者来更新控制器;例如。以下是不必要的：

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

指令和控制器共享范围，因此无需另外明确更新。

AngularJS - 三向绑定

2 个答案: