動態角度指令中的雙向綁定

因此，我的目標是對一系列活動重複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 
       }]; 
      }]); 
    });

dynamicDirective.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)); 
       } 
      }; 
     } 
    ]); 
});

activity1.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: '=' 
       } 
      }; 
     } 
    ]); 
});

activity1.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.instance是不確定的。因此，$ scope.thisInstance.isIncluded默認爲false。如果在main.html中我設置了attributes="instance='{{activities[0]}}'"，則$ scope.thisInstance.isIncluded的設置爲true，但我沒有雙向綁定，而是傳入的作爲本質上是指針的活動[0]，它將值，{type：「activity1」，isIncluded：true}。我怎樣才能讓雙向綁定工作？可能嗎？有一個更好的方法嗎？

來源

2017-05-31 ScubaSteve

您是否嘗試過ng-include？可能不是那麼花哨，但更簡單 –

我確實研究過它，但從我所知道的，ng-include只編譯html。相反，我需要一個真正的指令，儘管我上面的示例只有兩個按鈕，但我打算具有更多的功能，例如保存我想要重用的活動。 – ScubaSteve

範圍：{ 類型：「=」，屬性：「=」 } 寫你的範圍像 –

我目前的解決方法是利用ng-switch和繞過dynamicDirective.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>

這是不是最佳的，因爲它可能變得醜陋快。我不打算將此標記爲答案，因爲它只是一種解決方法。

來源

2017-06-01 13:58:49 ScubaSteve

動態角度指令中的雙向綁定

回答

相關問題