有谁知道你是否可以删除html代码中留下的角度注释？

例如:如果我使用ngRepeat并且没有要重复的项目,AngularJS会离开:

<!-- ngRepeat: post in posts -->

我有一个模板的指令

<div>
    <div ng-repeat="item in items" ng-click="updateModel(item)">
<div>

我的指令被声明为:

return {
    templateUrl: '...',
    restrict: 'E',
    require: '^ngModel',
    scope: {
        items: '=',
        ngModel: '=',
        ngChange: '&'
    },
    link: function postLink(scope, element, attrs) 
    {
        scope.updateModel = function(item)
        {
             scope.ngModel = item;
             scope.ngChange();
        }
    }
}

我希望ng-change在单击某个项目时调用,foo并且已经更改了值.

也就是说,如果我的指令实现为:

<my-directive items=items ng-model="foo" ng-change="bar(foo)"></my-directive>

我希望在更新bar值时调用foo.

使用上面给出的代码,ngChange成功调用,但使用旧值foo而不是新更新值调用它.

解决该问题的一种方法是调用ngChange内部超时以在将来的某个时刻执行它,此时值foo已经更改.但是这个解决方案让我可以放松地控制事情的执行顺序,我认为应该有一个更优雅的解决方案.

我也可以foo在父作用域中使用一个观察者,但是这个解决方案并没有真正给出一个ngChange方法,我被告知观察者是伟大的记忆消费者.

有没有办法在ngChange没有超时或观察者的情况下同步执行？

示例:http://plnkr.co/edit/8H6QDO8OYiOyOx8efhyJ?p=preview

我是Angular JS的新手,我正在尝试创建一个将使用如下的自定义指令:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps.控制器将是:

$scope.cashAccountsColumns = [
  {"field": "description", "title": "Description"},
  {"field": "owner", "title":"Owner"},
  {"field": "currentBalance", "title":"Current Balance" }
];

和指令代码是:

return {
      restrict : 'EA',
      transclude : false,
      templateUrl : 'html/linkedlist.html',
      scope: {
         listcolumns: "@"
      },
      link : function(scope, element, attrs) {
      }
}

模板是:

<table class="box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>

但这不起作用.我没有在屏幕上获得column.title的值,而是将以下太多行添加到DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>

我使用ui.bootstrap.datepicker指令来显示一些日期字段.然而,大多数时候我需要相同的设置:我希望它带有一个弹出按钮和一个弹出按钮,我也想要文本的德语名称.这确实为按钮和文本以及格式反复创建了相同的代码,因此我编写了自己的指令以防止自己重复自己.

这是我的指令的一个plunkr.但是我似乎做错了.如果您使用不使用我的指令的"日期1"日期选择器选择日期选择器的日期一切正常.我期望日期2相同,但不是根据我在输入字段中提供的模板(或我预期的任何其他值)显示.toString()日期,而是显示日期对象的表示(例如Fri Apr 03 2015 00:00:00 GMT+0200 (CEST)).

这是我的指示:

angular.module('ui.bootstrap.demo').directive('myDatepicker', function($compile) {
  var controllerName = 'dateEditCtrl';
  return {
      restrict: 'A',
      require: '?ngModel',
      scope: true,
      link: function(scope, element) {
          var wrapper = angular.element(
              '<div class="input-group">' +
                '<span class="input-group-btn">' +
                  '<button type="button" class="btn btn-default" ng-click="' + controllerName + '.openPopup($event)"><i class="glyphicon glyphicon-calendar"></i></button>' +
                '</span>' +
              '</div>');

          function setAttributeIfNotExists(name, value) {
              var oldValue = element.attr(name);
              if (!angular.isDefined(oldValue) || oldValue === false) {
                  element.attr(name, value);
              } …

我想知道如何使用AngularJs拖放.

这是我到目前为止:

<span><input type="checkbox" ng-model="master"><span>SelectAll</span></span>
<div ng-repeat="todo in todos">

    <div ng-hide="enableEditor">
        <a href="#">Drag</a>
        <input id="checkSlave" type="checkbox" ng-checked="master" ng-model="todo.done">

        <span ng-if="checked" ng-show="removed" ng-bind="todo.task_name" class="removed"></span>
        <span ng-bind="todo.task_name"></span>
        <span ng-bind="todo.state"></span>
        <a href="#" ng-click="editTask(todo.task_id,todo.task_name,editMode=!editMode)">Edit</a> 

       </div>
       </div>

    <div ng-show="enableEditor">
     <input type="text" ng-show="editMode" ng-model="todo.task_name"  ng-change="update(todo.task_id,todo.task_name)">
     <a href="#" ng-click="saveTask(todo.task_id,todo.task_name,editMode=!editMode)">Save</a>
     <a href="#" ng-click="cancelTask(todo.task_id,todo.task_name,editMode=!editMode)">Cancel</a>
    </div>
</div>

http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=preview ..

嗨我想知道在使用angularjs上传它们之前是否有预览图像的方法？我正在使用这个库.https://github.com/danialfarid/angular-file-upload

谢谢.这是我的代码:

template.html

 <div ng-controller="picUploadCtr">
<form>
        <input type="text" ng-model="myModelObj">
      <input type="file" ng-file-select="onFileSelect($files)" >
 <input type="file" ng-file-select="onFileSelect($files)" multiple>

 </form>
     </div>

controller.js

  .controller('picUploadCtr', function($scope, $http,$location, userSettingsService) {

 $scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
  var $file = $files[i];
  $http.uploadFile({
    url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url)
    data: {myObj: $scope.myModelObj},
    file: $file
  }).then(function(data, status, headers, config) {
    // file …

目前,我们可以通过多种方式监控数据变化.我们可以触发模型更改,$watch我们可以向元素添加指令并将一些操作绑定到它.

在许多情况下它有点令人困惑,所以我很好奇,这是每个变体的优点和缺点,什么时候应该使用$watch绑定,何时指令如何ng-change？

我想创建一个指令,根据来自服务的值(例如,检查用户角色)检查dom中是否应该存在元素.

相应的指令如下所示:

angular.module('app', []).directive('addCondition', function($rootScope) {
    return {
        restrict: 'A',
        compile: function (element, attr) {
          var ngIf = attr.ngIf,
              value = $rootScope.$eval(attr.addCondition);

          /**
           * Make sure to combine with existing ngIf!
           * I want to modify the expression to be evalued by ngIf here based on a role 
           * check for example
           */
          if (ngIf) {
            value += ' && ' + ngIf;
          }

          attr.$set('ng-if', value);
        }
    };
});

最后,元素附加了ng-if属性,但不知何故,它不适用于元素,它仍然存在于dom中.所以这显然是一种错误的做法.

这个小提琴显示了问题:http://jsfiddle.net/L37tZ/2/

谁能解释为什么会这样？有没有其他方式可以实现类似的行为？应考虑现有的ngIfs.

解:

用法: <div rln-require-roles="['ADMIN', 'USER']">I'm …

我已经尝试按照ng-directive-testing repo 的格式来编写我编写的指令.当用户点击元素时,该指令基本上呈现叠加.这是指令(简化):

mod.directive('uiCopyLinkDialog', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var $elm = angular.element(element);
            element.bind('click', function(event) {
                $elm.addClass('test');
            });
        }
    };
});

我写的测试看起来像这样:

describe('pre-compiled link', function () {

    beforeEach(mocks.inject(function($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element('<span class="foo" ui-copy-link-dialog="url"></span>');
        $compile(element)(scope);
        scope.$digest();
    }));

    it("should change the class when clicked", function () {
        element.click(); // this returns "'undefined' is not a function"
        element[0].click(); // so does this
        $(elm).click(); // this uses jquery and doesn't *seem* to fail …

我正在尝试学习角度,我正在努力点击一个简单的按钮.
我按照一个示例,它具有与下面相同的代码.

我正在寻找的结果是单击按钮以引发警报.但是,按钮单击没有响应.有人有什么想法吗？

<html lang="en" ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div >
        <button my-directive>Click Me!</button>
    </div>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

    <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>