小编New*_*Dev的帖子

我正在尝试使用ng-blur <tr ng-blur="blurFn()">但它不会触发.它仅在子<input>元素上触发.

这不是特定的<tr>或<td>.根据Angular 文档,ng-blur对模糊事件做出反应,模糊事件不会"冒泡"."焦点"事件泡沫,但没有ng-focusout.

我错过了什么或者我是否需要创建一个新的指令来处理焦点事件？

这是代码片段和小提琴:

HTML

<div ng-app="App">
    <div ng-controller="Ctrl as ctrl">
        <table>
            <tr ng-repeat="item in ctrl.items" ng-blur="ctrl.blurFn()">
                <td><input ng-model="item.A"/></td>
                <td><input ng-model="item.B"/></td>
            </tr>
        </table>
    </div>
</div>

JS

angular.module("App", [])
.controller("Ctrl", function(){
    this.blurFn = function($event){
        console.log($event.target);
    };

    this.items = [
        {A: "111", B: "222"},
        {A: "111", B: "222"},
        {A: "111", B: "222"},
        {A: "111", B: "222"},
        {A: "111", B: "222"}
        ];
});

我已经实现了一个自定义输入指令 - counter具有重置功能.该指令有require: "ngModel".

我复位指令的的原始状态ngModel用$setPristine().不同$setDirty(),$setPristine()不触及$pristine父表单的状态.

问:如何"通知"父表单该指令不再"脏",以便父表单可以$pristine重置其状态？

请记住,只是调用form.$setPristine()是不够的,因为表单中可能还有其他"脏"控件,我的指令不会(也不应该)知道.

这是指令的链接功能:

link: function(scope, element, attrs, ngModel){

  var original;

  ngModel.$render = function(){
    original = scope.counter = ngModel.$viewValue;
  };

  scope.up = function(){
    ngModel.$setViewValue(++scope.counter);
  };

  scope.reset = function(){
    scope.counter = original;
    ngModel.$setViewValue(scope.counter);
    ngModel.$setPristine(); // this sets $pristine on the directive, but not the form
  };
}

以下是它的使用方法:

<div ng-form="form">
  <counter ng-model="count"></counter>
</div>

plunker

我有两个输入文本框.我需要将输入的值组合在两个文本框中,并在第三个文本框中显示.如果我只value在第三个文本框中使用,我可以显示它.

方框1:

 <input type="text" ng-model="entity.name">

方框2:

 <input type="text" ng-model="entity.code">

方框3:方框1 +方框2

  <input type="text" value="{{entity.name+ ' + ' + entity.code}}">

但是,如果我在第三个框中使用模型名称,则逻辑似乎不起作用:

 <input type="text" value="{{entity.name+ ' + ' + entity.code}}" 
        ng-model="entity.fullCode">

任何人都可以建议修复？

我有我的复选框输入,它根据变量动态设置"true"值,该变量trueVal是一个字符串.

<input ng-model="foo" ng-true-value="'{{trueVal}}'">

例如,对于trueVal = "something",foo === "something"当复选框被选中.

除了在trueVal等于带有单引号的字符串的情况下,这种方法有效:Customer didn't understand.在这种情况下,有一个错误:

错误:[$ parse:lexerr] Lexer错误:表达式['客户不理解']中第27-28行[']的未终止引用.

我无法删除单引号,因为字符串应按原样设置foo.

更广泛的背景:

我正在根据options我从后端获得的列表创建一组复选框:

<div ng-repeat="(key,option) in options">
  <input type="checkbox" 
         ng-model="foo[key]"
         ng-true-value="'{{option.trueVal}}'"
         ng-false-value="null">
</div>

所以,给定:

options =  {
             0: {trueVal: "Customer was late"},
             1: {trueVal: "Customer didn't understand"}
           };

我希望看到:

foo = {
  1: "Customer didn't understand"
};

如果选中第二个框.

我的应用程序在客户端使用Angularjs.我有五个使用相同逻辑的指令.以下是我的代码的必填详情

1. 我有一个纯javascript类作为AppUtilities.js定义了以下方法

   var AppUtilities = {
     //Get the guid for given collection
     getGUID: function (collectionName) {
         var prefix;
         var guid;
         //get first two character
         if (!Utilities.isEmpty(collectionName)) {
            prefix = collectionName.substring(0, 2);
            //Get timestamp
            var timestamp = Utilities.getTimestampId();
            //concate prefix to get the guid
            guid = prefix + timestamp;
         }
         return guid;
     }
   };
   

   Run Code Online (Sandbox Code Playgroud)

2. 我有五个不同的指令,我需要使用"getGUID()"方法与模板绑定.由于模板只能与范围函数绑定,因此我在所有这五个模板中定义了范围方法,如下所示

   scope.getGUID = function (collectionName) {
     return AppUtilities.getGUID(collectionName);
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 然后在所有五个指令模板中,此方法作为范围变量绑定

   <h4 class="guid" id="guid" data-ng-bind-template="{{getGUID('goal')}}"></h4>
   

   Run Code Online (Sandbox Code Playgroud)

如何避免将这些方法声明为范围变量并直接AppUtilities.getGUID(collectionName)在HTML模板中使用？

我正在尝试在 SwiftUI 中编写一个“单视图应用程序”。主要设计非常简单。我有一个项目列表（例如费用），我在导航视图 - >列表的主视图中显示它。

列表查看源代码

    import SwiftUI

struct AmountBasedModifier : ViewModifier{
    var amount: Int
    func body(content: Content) -> some View {
        if amount <= 10{
            return content.foregroundColor(Color.green)
        }
        else if amount <= 100{
            return content.foregroundColor(Color.blue)
        }
        else {
            return content.foregroundColor(Color.red)
            
        }
    }
}

extension View {
    
    func amountBasedStyle(amount: Int) -> some View {
        self.modifier(AmountBasedModifier(amount: amount))
    }
}

struct ExpenseItem: Identifiable, Codable {
    var id = UUID()
    var name: String
    var type: String
    var amount: Int
    
    static var Empty: ExpenseItem{ …

我一直在使用隔离范围指令一段时间,并且想到了一个问题,看着它的行为:

为什么我不能将我在指令继承范围内定义的变量直接绑定到视图？

让我举一个关于这个代码笔的例子:http: //codepen.io/anon/pen/VLKjrv

当我在指令控制器中创建一个新的$ scope变量,并尝试将其绑定在视图上时,它不起作用.另一方面,当我将该变量绑定到来自模板指令属性的html时,它确实有效.

看看代码:

<body ng-app="isolated-test-app">
<section ng-controller="isolatedTestCtrl">
    <article>
      <h1>test1</h1>
        <div isolated-directive binding-from-attr="test">
            <span ng-bind="test"></span>
            <span ng-bind="test2"></span>
        </div>
      <h1>test2</h1>
        <div isolated-directive-number-two binding-from-attr="test">
        </div>

    </article>
</section>

angular.module('isolated-test-app', [])

.controller('isolatedTestCtrl', function isolatedTestCtrl($scope){
    $scope.test = 'Binded from parent controller';
})

.directive('isolatedDirective', function isolatedDirective(){

    var directive = {
        scope: {
          bindingFromAttr: '=',
        },
        controller: function directiveController($scope){
           $scope.test2 = 'Binded from directive controller!';
        },
    };

    return directive;
})

.directive('isolatedDirectiveNumberTwo', function isolatedDirective2(){

    var directive = {
        scope: {
          bindingFromAttr: '=',
        }, …

我在 SwiftUI/Combine 应用程序中使用 Firebase，并且注意到一些警告，我想对其进行故障排除。他们没有破坏事情，但我想解决它们。我使用带有最新 Swift 包依赖项的 Xcode 12.4 时收到这些警告：GoogleUtilities 7.2.2 和 Firebase 7.7.0。

这是控制台中出现的第一个警告：

[GoogleUtilities/AppDelegateSwizzler][I-SWZ001014] App Delegate does not conform to UIApplicationDelegate protocol.

作为参考，这是我配置 Firebase 的方式：

import SwiftUI
import Firebase

@main
struct MyApp: App {
    
    @StateObject var authState = AuthState()
    
    init() {
        FirebaseApp.configure()
    }
    
    var body: some Scene {
        
        WindowGroup {
            RootView()
                .environmentObject(authState)
        }
    }
}

这是第二个警告，在我使用修饰符设置导航栏标题后出现.navigationBarTitle。

[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't …

我$validator用来编写自定义表单验证指令.

目前它看起来像这样:

module.directive('tweetLength', function(URLDetector) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      var allowedCharacters;
      allowedCharacters = parseInt(attrs.tweetLength);

      ctrl.$validators.tweetLength = function(modelValue, viewValue) {
        var result;
        return result = URLDetector.urlAdjustedCharacterCount(modelValue) <= allowedCharacters;
      };
    }
  };
});

它会检查它连接到的字符数的元素的模型,同时考虑到链接缩短(所以ng-minlength和ng-maxlength不工作).如果不满足要求,则返回false.问题是,当它返回false modelValue时undefined.我知道此时该值应该存储在其中$$invalidModelValue,但我仍然需要原始模型中的值,因为它在视图中的其他位置使用.

有没有办法阻止Angular移动它并制作原始模型undefined？我知道这个问题可以在表单控制器中解决,但我不认为这是正确的方法,因为我想使用表单状态而不是某些外部变量来禁用表单提交按钮.在使用Angular表单验证时是否有其他方法可以解决此问题？

如果我有一个@State或一个@ObservedObject具有数组属性的变量，并且我想使用List数组的每个元素的绑定并将其传递到某个子视图（例如Toggle或TextField），是否有标准方法可以做到这一点？

简化示例：

struct Person: Identifiable {
  var id: UUID = .init()
  var name: String
  var isFavorite: Bool = false
}

struct ContentView: View {
  @State var people = [Person(name: "Joey"), Person(name: "Chandler")]

  var body: some View {
     List(people) { person in
        HStack() {
           Text(person.name) 
           Spacer
           Toggle("", isOn: $person.isFavorite) // <- this obviously doesn't work
        }
     }
  }
}

这似乎是一个相当常见的场景，但除了手动构建单独的绑定数组之外，我无法找出明显的解决方案。

我想出的唯一优雅的解决方案（如果没有更好的东西，我会将其添加为答案）是创建Bindinga的扩展，它RandomAccessCollection本身符合 a RandomAccessCollection，它具有绑定作为元素，如下所示：

extension Binding: RandomAccessCollection …