Question

我创建了一个简单的指令，但目前我没有设置任何范围。但是我希望该指令使用隔离范围，以便我可以轻松地重用它。

这是我的html，该指令被称为＆＃34; select-time＆＃34;：

<div class="menuHour after" select-time><div class="menuHour-panel before"><span class="menuHour-panel-title" ng-click="changeToBefore()">Before 12h</span></div>

我保持这个例子简短，所以它在这里做的唯一事情就是改变课程＆＃34; menuHour＆＃34;到＆＃34;菜单之前＆＃34;。

用方法＆＃34; changeToBefore（）＆＃34;来做这件事。

这是我的指示：

angular.module("tiki").directive("selectTime", function(newTiki){

return {

    restrict:"A",
    controller:function($scope, $element, $attrs){

        $scope.changeToBefore = function(){

            var menuHour = document.querySelector(".menuHour")

            menuHour.classList.remove("after")
            menuHour.classList.add("before")

        }

    }

}

}）

如何将其更改为隔离范围指令？

THX，

Answer 1

您可以使用scope: {}定义isolated scope：

我也会使用$ element而不是再次获取该元素！

angular.module("tiki").directive("selectTime", function(newTiki){

  return {

      restrict:"A",
      scope: {},
      templateUrl: '/path/to/directive.html',
      controller:function($scope, $element, $attrs){

        $scope.changeToBefore = function(){

            $element.removeClass("after")
            $element.addClass("before")

        }

      }

  }
})

转换指令以使用隔离范围

1 个答案: