AngularJS自定义指令 - 将隔离范围映射到新的子范围

Question

我为自举警报创建了自定义指令。我的警报显示正常（硬代码和数据绑定）。根据警报类型，我希望根据返回的范围值（成功，信息，警告，危险）在我的警报消息中显示一个唯一标题。目前，我将该类型传入<h1>，但我不想要这些值，它们需要定制。

<!-- data binding example --> 
<trux-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</trux-alert> 

<!-- hard coded example --> 
<trux-alert close="close" type="warning">This is an important warning message!</trux-alert> 

在我的指令，范围使用范围隔离：“@”（单程）

.directive('truxAlert', function() { 
    return { 
     scope: { 
      type: '@', 
      close: '&' 
     }, 
     replace: true, 
     transclude: true, 
     template: 
      '<div class="alert" '+ 
        'ng-class="[\'alert-\' + (type || \'warning\'), closeable ? \'alert-dismissible\' : null]" '+ 
        'role="alert">'+ 
       '<button ng-show="closeable" '+ 
         'type="button" class="close" '+ 
         'ng-click="close({$event: $event})" '+ 
         'data-dismiss="alert" aria-label="Close">'+ 
        '<span aria-hidden="true">&times;</span>'+ 
        '<span class="sr-only">Close</span>'+ 
       '</button>'+ 
       '<h1>{{type}}</h1>'+ 
       '<div ng-transclude></div>'+ 
      '</div>', 
     link: function (scope, element, attrs) {} 
    } 
}); 

这将是更容易，如果我所有的值是通过数据绑定拉升，但我需要以允许手动硬编码选项。我知道单向隔离范围'@'我不能通过DOM操作来改变这些值。我无法使用'='或'&'进行双向，因为这些值是字符串。

我该如何解决这个问题？

Answer 1

我的建议有一个属性，用于控制指令警报的打开/关闭状态以及用于解除处理函数的另一个属性。

angular.module("myApp").directive('truxAlert', function() { 
    return { 
     scope: { 
      type: '@', 
      dismissHandler: '&', 
      title: '@', 
      open: '=' 
     }, 
     replace: true, 
     transclude: true, 
     template: 
      '<div class="alert" ng-show="open" '+ 
        'ng-class="[\'alert-\' + type]" '+ 
        'role="type">'+ 
       '<button type="button" class="close" '+ 
         'ng-click="truxClose($event)" '+ 
         'data-dismiss="alert" aria-label="Close">'+ 
        '<span aria-hidden="true">&times;</span>'+ 
        '<span class="sr-only">Close</span>'+ 
       '</button>'+ 
       '<h1>{{title+" "+type}}</h1>'+ 
       '<div ng-transclude></div>'+ 
      '</div>', 
     link: function (scope, element, attrs) { 
      console.log("truxAlert linking"); 
      if (!scope.type) { scope.type="warning" } 
      scope.truxClose = function(event) { 
       console.log("truxClose "+event); 
       if (attrs.dismissHandler) { 
        scope.dismissHandler({$event: event}); 
        return; 
       } 
       scope.open = false; 
      }; 
     } 
    }; 
}); 

该指令的链接函数确定dismiss-handler属性存在，要么调用解雇处理机或直接关闭警报。

DEMO PLNKR显示指令与ng-repeat指令一起使用并以独立方式使用。

Answer 2

也许，我不明白你的问题。

你想这样做jsfiddle？

<form name="ExampleForm" id="ExampleForm"> 
    <span simple="{{val}}">{{val}} - value from data-binding </span> 
    <br> 
    <span simple="valueTwo">valueTwo - hard code value</span> 
</form> 

和JS控制器

.controller('ExampleController', function($scope, $rootScope, $alert) { 
$scope.val = "valueOne";}) 

和JS指令

.directive('simple', function() { 
return { 
    restrinct: 'A', 
    scope: { 
    simple: "@" 
    }, 
    link: function(scope) { 
    console.log(scope.simple, typeof(scope.simple)); 
    } 
}}) 

修订

angular.module('ExampleApp', ['use', 'ngMessages']) 
 
    .controller('ExampleOneController', function($scope) { 
 
    $scope.val = "valueOne"; 
 
    $scope.$on('pass.from.directive', function(event, value) { 
 
     $scope.valFromDirective = value; 
 
    }); 
 
    }) 
 
    .controller('ExampleTwoController', function($scope) { 
 
    $scope.val = "valueTwo"; 
 
    $scope.$on('pass.from.directive', function(event, value) { 
 
     $scope.valFromDirective = value; 
 
    }); 
 
    }) 
 
    .controller('ExampleThreeController', function($scope) { 
 
    $scope.val = "valueThree"; 
 
    $scope.$on('pass.from.directive', function(event, value) { 
 
     $scope.valFromDirective = value; 
 
    }); 
 
    }) 
 
    .directive('simple', function($interval) { 
 
    return { 
 
     restrinct: 'A', 
 
     scope: { 
 
     simple: "@" 
 
     }, 
 
     link: function(scope) { 
 
     var i = 0; 
 
     $interval(function() { 
 
      i++; 
 
      scope.$emit('pass.from.directive', scope.simple + i); 
 
     }, 1000); 
 

 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleOneController"> 
 
    <h3> 
 
     ExampleOneController 
 
    </h3> 
 
    <form name="ExampleForm" id="ExampleForm"> 
 
     <div simple="{{val}}">{{val}} - value from scope </div> 
 
     <div>{{valFromDirective}} - value from directive </div> 
 
    </form> 
 
    </div> 
 
    <div ng-controller="ExampleTwoController"> 
 
    <h3> 
 
     ExampleTwoController 
 
    </h3> 
 
    <form name="ExampleForm" id="ExampleForm"> 
 
     <div simple="{{val}}">{{val}} - value from scope </div> 
 
     <div>{{valFromDirective}} - value from directive </div> 
 
    </form> 
 
    </div> 
 
    <div ng-controller="ExampleThreeController"> 
 
    <h3> 
 
     ExampleThreeController 
 
    </h3> 
 
    <form name="ExampleForm" id="ExampleForm"> 
 
     <div simple="{{val}}">{{val}} - value from scope </div> 
 
     <div>{{valFromDirective}} - value from directive </div> 
 
    </form> 
 
    </div> 
 
</div>