在动态角指令中两种结合

Question

因此，我的目标是在一系列活动上进行ng重复，并根据活动类型显示特定的指令。现在，我只是在测试这个想法，看看它是否可行。我可以动态地显示指令，但是关键是我想在Main.js和显示的指令中的活动之间具有两种绑定。

main.html

<div ng-controller="mainCntrl">
  <div>Activity: { <div>isIncluded: {{activities[0].isIncluded}}</div> }</div>
  <dynamic-directive type="{{activities[0].type}}" attributes="instance='activities[0]'"></dynamic-directive>
</div>

main.js

define(['angularAMD', 'dynamicDirective', 'activity1'],
    function (angularAMD) {
        'use strict';
        var app = angular.module('mainModule', []);
        app.controller('mainCntrl', ['$rootScope', '$scope',
            function ($rootScope, $scope) {
                $scope.activities = [{
                    type: "activity1",
                    isIncluded: true
                }];
            }]);
    });

dynamicIcirective.js

define('dynamicDirectiveModule', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('dynamicDirectiveModule', []);
    app.directive('dynamicDirective', ['$compile',
        function ($compile) {
            return {
                restrict: 'E',
                scope: {
                    type: '@',
                    attributes: '@'
                },
                link: function (scope, element) {
                    var generatedDirective = '<' + scope.type + ' ' + scope.attributes + '></' + scope.type + '>';
                    element.append($compile(generatedDirective)(scope));
                }
            };
        }
    ]);
});

活动1.js

define('activity1Module', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('activity1Module', []);
    app.controller('activity1Cntrl', ['$scope',
        function ($scope) {
            console.log("$scope.instance: " + $scope.instance);
            $scope.thisInstance = $scope.instance || {};
        }
    ]);
    app.directive('activity1', [
        function () {
            return {
                restrict: 'E',
                templateUrl: 'processes/templates/Activity1',
                controller: 'activity1Cntrl',
                scope: {
                    instance: '='
                }
            };
        }
    ]);
});

活动1.html

<div>
  <div>ISINCLUDED: {{thisInstance.isIncluded}}</div>
  <button ng-model="thisInstance.isIncluded" value="true">Yes</button>
  <button ng-model="thisInstance.isIncluded" value="false">No</button>
</div>

现在设置它的方式，Console.Log输出$ scope.intance不确定。因此，$ scope.thisinstance.iscluded默认为false。如果在main.html中，我设置了 attributes="instance='{{activities[0]}}'"，$ scope.thisinstance.iscluded正确设置为true，但是我没有双向绑定，因为我没有将活动[0]作为指针传递，它通过值，{type：" activity1"，Included：true}。我如何才能使双向绑定起作用？是否可以？有更好的方法吗？

Answer 1

我目前的解决方法是利用ng-switch和bypass dynamiciCdirective.js。

main.html

<div ng-switch="activity.type" ng-repeat="activity in activities">
    <activity1 ng-switch-when="activity1" instance="activity"></activity1>
    <activity2 ng-switch-when="activity2" instance="activity"></activity2>
</div>

这不是最佳的，因为它可能会变得丑陋。我不会将其标记为答案，因为它只是解决方法。