标签: angularjs-directive

尝试在angular js中使用自定义指令匹配密码。尽管我看过几个Google教程，但我无法正常工作。我已经创建了一个Plunker，它显示了它在plunker上不起作用。

HTML：

    <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
        <span ng-show="user.confirmpwd.$error.equal" class="help-block">Password does not match above</span>
    </div>

JAVASCRIPT：

app.directive('equal', [
function() {

var link = function($scope, $element, $attrs, ctrl) {

  var validate = function(viewValue) {
    var comparisonModel = $attrs.equal;
      console.log(viewValue + ':' + comparisonModel);

    if(!viewValue …

我有一个名为test的按钮和一个带有三个值的下拉菜单.如何根据下拉菜单中选择的值启用 - 禁用"测试"按钮.例如.如果选择"未就绪",则应禁用按钮如果选择就绪或注意,则应启用按钮

<div class="row">
    <div>
    <button id="testBtn" class="btn btn-default" >Test</button>
    </div>
</div>


<div class="row">
<div class="col-md-12">


    <select name="select">
        <option value="value1" selected>Not ready</option> 
        <option value="value2">Ready</option>
        <option value="value3">Attention !!</option>
    </select>


 </div>
</div>

见Plunker

所有,

当涉及到指令时,我对angularjs的理解是当你有一个像这样的隔离范围设置时:

scope: {
  dataSource: '='
}

在链接功能内: function(scope, ele, attr)

如果像这样使用,scope将有一个dataSource绑定到name我的控制器上的属性:

<my-element data-source='name'></my-element>

然而事实并非如此,这是一个例子:

http://jsfiddle.net/HB7LU/21879/

谢谢

史蒂夫

我正在尝试使用Angular.JS动态地将列添加到html表中.

它从一组数据开始,我想在点击时提供额外的数据.我是Angular的新手,并且让这个用来说明我正在尝试做什么.我(显然)只是根据数组中的项目数添加一个新的表头和一个新的表数据,与同一行的索引号匹配.谢谢

控制器:

function Ctrl($scope) {
$scope.data = [];
$scope.data[3] = [];
$scope.data[0] = [['New York', 1000,2000],['Los Angeles', 200,400],['Nottingham', 800,400]]
$scope.moredata = [1500, 2500, 4500];
temp = []
$scope.getData = function() {
  $scope.moduleArray[1] = $scope.moredata;
}
$scope.moduleArray = $scope.data;
}

HTML:

<div ng-controller="Ctrl">
  <button ng-click="getData()">Get more data</button>
  <table>
  <tr>
      <th>Location</th>    
      <th>Current Data</th> 
      <th ng-repeat="ba in moduleArray[1]">new data</th>    
  </tr>
  <tr data-ng-repeat="item2 in moduleArray[0]">   
      <td>2[0]{{item2[0]}}</td>  
            <td>2[1]{{item2[1]}}</td>   
      <td data-ng-repeat="bat in moduleArray[1]">{{bat[$parent.$index]}}</td>
  </tr>
</table>

Plunkr

我正在使用controllerAs和bindToController"pattern"在Angular 1.4.12上实现AngularJS指令,以便拥有一个不依赖于$ scope的干净控制器.但是我仍然觉得很难摆脱这些线上的$ scope:

$scope.$on( '$destroy', function() {...} );
$scope.$on( '$stateChangeSuccess', function() {} );

知道如何处理这种情况吗？

谢谢

我正在尝试在输入时完成或提交输入,而不是单击提交按钮.这纯粹是通过指令吗？或者我必须添加一些JS？

这是我的意见:

<input type="text" ng-model='main.input' placeholder='some text' required=''/>

  <tab page="book"> </tab>
  <tab page="dial"> </tab>
  <tab page="groupe"> </tab>
  <tab page="log"> </tab>
  <tab page="star"> </tab>

如你所见,我有一个名为tab的指令,这个选项卡有一个属性页面,

我需要根据页面属性的值 更改templateUrl

如果页面值是page="abc"那么templateUrl应该是 templateUrl: 'tab/abc.html',

这是我的指令代码

contactBook.directive('tab', function() {
    let m = 'tab/default.html';
    return {
        restrict: 'E',
        scope: {
            page: '@',
        },
        templateUrl: m,
        link: function(scope, element, attributes) {
            m = "tab/" + scope.page + ".html";      
        },
    };
});

这在逻辑上是可能的吗？或任何替代方法来做到这一点..？

我一直试图解决这个问题很长一段时间,希望有人可以指出出了什么问题.

我正在尝试编译HTML模板,因为它不会调用该函数removeAllImages().根据范围的控制台日志,我可以看到该功能在那里.

这是我的指示:

musicianMarketplace.directive('slideshowImagesManage', ['$q', 'Auth', '$compile', 
  function ($q, Auth, $http, $location, $compile) {
    return {
        restrict: 'E',
        // scope: {
        //     slideshowImages: '=',
        //     // removeAllImages: '&',
        //     // removeImage: '&'
        // },
        // transclude: true,
        link: function ($scope, elem, attr) {

            console.log($scope);

            // slideshowImages = attr.slideshowImages;
            // removeAllImages = attr.removeAllImages;
            // removeImage = attr.removeImage;

            function updateImages() {
                $q.when($scope.slideshowImages).then(function (slideshowImages) {
                    elem.empty();
                    var html = '';
                    if (slideshowImages != null) {

                        html += '<div class="col-xs-12 col-sm-12 col-md-12 …

<div ng-controller="xxxController" >                           
  <table>                       
    <tr ng-repeat="x in xxxx">
       <td>...
       </td>
    </tr>
  </table>
</div>  

ng-controller标签在任何表格旁边,它工作正常.

但是如果ng-contoller标签在任何表格内,则ng-repeat不起作用

<table>                                                             
  <div ng-controller="xxxController" >
    <tr ng-repeat="x in xxxx">
      <td>...
      </td>
    </tr>
  </div>    
</table>

我有这样的指示

  app.directive('clipChat', ClipChat);

function ClipChat() {
    var strfin ='*';
    var chatTemplate = '<div ng-repeat="message in newarr">   <span ng-if="message.content.slice(-1)==message.star"  ng-click="makeitTodo(message)">i <i class="fa fa-mail-forward "></i></span> '+ '</div>' ;
    var directive = {
        restrict: 'EA',
        template: chatTemplate,
        replace: true,
        scope: {
            messages: "=",
            idSelf: "=",
            idOther: "=",

        },


        link:function ($scope) {

//等等

当我单击控制器内的span元素时,我想调用函数makeitTodo ..

我测试过如下.

app.controller('ChatCtrl',  ["$scope",function($scope){
 $scope.makeitTodo = function(a){
  alert(a);
}
}])

但它不起作用.请帮助我.