Question

为什么我不能在我的情况下使用隔离范围和$ compile？当我使用隔离范围时，我无法编译并附加元素。

app.directive('btnClick', function($compile) {

  return {
    scope: {
      btnCheck : '@'
    },
    restrict: 'A',

    link: function(scope, element, attrs) {
      var el = $compile(scope.$eval(attrs.actionBtn))(scope);
      element.append(el);

    }

  }

})

http://plnkr.co/edit/6mlTuhqJz9bzUkF4lNrY?p=preview

请帮忙

Answer 1

试试Dreams:text 并在你的链接函数中首先创建元素，然后使用$ compile：

<div btn-click action-btn="{{dctrl.clk}}"></div>

我还可以看到您要将名为 btnCheck 的参数字符串传递给指令 btnClick ，但是您将该属性放在错误的标记上。不知道你想要完成什么。

Answer 2

以下是如何使其可重复使用的方法。您可以使用'＆amp;'绑定指令中的行为。正如您在演示中看到的那样，两个按钮都使用相同的指令和模板，但每个按钮都绑定到控制器中的不同功能：

return badRequest()

var app = angular.module('app', []);

app.controller('demoCtrl', function() {
  this.click = function() {
    alert('clicked');
  }
  this.otherclick = function() {
    alert('clicked other');
  }
})

app.directive('btnClick', function($compile) {
  return {
    scope: {
      name: '@btnClick',
      action: '&actionBtn'
    },
    restrict: 'A',
    template: '<button ng-click="action()">{{name}}</button>',

  }

})

button {
  display: inline-block;
  padding: 12px 18px;
  margin: 10px;
  font-size: 14px;
  text-align: center;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
}
button:hover, button:focus {
  background-color: #e6e6e6;
  border-color: #adadad;
  cursor: pointer;
  outline: none;
}

在AngularJs中一起使用$ compile和isolated scope

2 个答案: