Question

有一个AngularJS控制器，可以通过GET将API中的数据加载到作用域中。如果适用某些条件，模板将显示不同的输入字段。显示这些输入字段后，我想在这些元素上执行Javascript代码（例如Bootstrap .datepicker（））。

我该怎么做？我需要一个像 AngularJS准备呈现模板等事件..

Answer 1

最好的方法是create your own directives（参见创建操纵DOM的指令一节）。

在link方法中，您可以获取元素并执行您想要的操作。像：

function myDatePickerDirective() {

  function link(scope, element, attrs) {
    element.datepicker();
  }

  return {
    link: link
  };
}

angular.module('app')
  .directive('myDatePicker', myDatePickerDirective);

但您也可以找到有用的the AngularUI lib。它有一些有用的Bootstrap组件。

Answer 2

这是一个演示，但您可以将其与其他库一起使用。

var myApp = angular.module('myApp', []);

myApp.directive("datepicker", function () {
  return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, elem, attrs, ngModelCtrl) {
      var updateModel = function (dateText) {
        scope.$apply(function () {
          ngModelCtrl.$setViewValue(dateText);
        });
      };
      
      /* Your custom Date library */
      elem.datepicker({
        autoclose: true
      }).on('changeDate', function(e){
        /* Update the model when the date is changed */
        updateModel(e.format());
      });
    }
  }
});

<div ng-app="myApp">
  <input type="text" ng-model="datePicker" datepicker />
  <span>{{datePicker || "00/00/0000"}}</span>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

在AngularJS模板呈现后执行Javascript

2 个答案: